Getting error while building mobile app

bDurtaut · Décembre 19, 2021, 6:52

On run on browser , invalid axelor URL message ( the URL its the same that i choose for application mobile from play store )
Can anyone test on browser and create Apk with cordova ?
Regards

AxelorTeam · Janvier 24, 2022, 10:28

Hi,
As you are trying to run application in development mode you need to configure cors in your AOS url instance.
Also you can put your AOS url as a proxy in packages/web-ui/package.json file.

Let me know if it’s working or not.

Thanks
Amit Patel - Axelor

AxelorTeam · Janvier 24, 2022, 10:31

build command throwing an error due to @/axelor/* wrapped in single quotes. In old lerna version single quotes was working fine but in new version it’s working without single quotes. We will update repo for these correction. But for the moment, developers can change build script in package.json with following:

"build": "lerna run prepublish --scope @axelor/* && lerna bootstrap"

bDurtaut · Janvier 24, 2022, 1:36

In my application.properties file CORS is configured like that :

CORS configuration to allow cross origin requests

~~~~~

regular expression to test allowed origin or * to allow all (not recommended)

cors.allow.origin = *
cors.allow.credentials = true
cors.allow.methods = GET,PUT,POST,DELETE,HEAD,OPTIONS
cors.allow.headers = Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers

With your mobile APP from playstore , no problem .

AxelorTeam · Février 7, 2022, 9:47

You need to configure like this:

cors.allow.origin = *
cors.allow.credentials = true
cors.allow.methods = GET,PUT,POST,DELETE,HEAD,OPTIONS
cors.allow.headers = Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,X-File-Name,X-File-Offset,X-File-Size,X-File-Type,X-File-Id,X-CSRF-Token
cors.expose.headers = X-CSRF-Token

Note: keep in mind that, Above configuration is just for development purposes only.

bDurtaut · Février 8, 2022, 4:51

AxelorTeam:

cors.allow.origin = *
cors.allow.credentials = true
cors.allow.methods = GET,PUT,POST,DELETE,HEAD,OPTIONS
cors.allow.headers = Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,X-File-Name,X-File-Offset,X-File-Size,X-File-Type,X-File-Id,X-CSRF-Token
cors.expose.headers = X-CSRF-Token

Thanks but doesnt work , invalid url message

AxelorTeam · Février 16, 2022, 6:58

I think it will be other problem. I need to have some more information related to your problem. Like what response you are getting in api call. What messages you are getting in console related to error etc…

bDurtaut · Février 16, 2022, 12:28

I dont know , playstore app works fine with this server instal

rsh-axelor · Mars 24, 2022, 5:24

Hello,
Can you please provide us more details, like what console errors are you getting.

bDurtaut · Avril 2, 2022, 3:16

Hello , console error

crbug/1173575, non-JS module files deprecated.
Download the React DevTools for a better development experience: https://fb.me/react-devtools
Download the React DevTools for a better development experience: https://fb.me/react-devtools
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

Move data fetching code or side effects to componentDidUpdate.
If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Navigator, Provider
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

Move data fetching code or side effects to componentDidUpdate.
If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Connect(HomePage), Connect(PageComponent), Connect(Translate), Page
Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

Move data fetching code or side effects to componentDidUpdate.
Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Connect(HomePage), Connect(PageComponent), Connect(Translate)
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

Move data fetching code or side effects to componentDidUpdate.
If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Connect(LoginPage), Input, Modal
Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

Move data fetching code or side effects to componentDidUpdate.
Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: Connect(LoginPage)
./src/mobile/pages/common.func.js
Line 2: ‹ Translate › is defined but never used no-unused-vars
./src/mobile/pages/production/stock-move/view.js
Line 3: ‹ moment › is defined but never used no-unused-vars
Line 20: ‹ PageElement › is defined but never used no-unused-vars
Line 25: ‹ TabberView › is defined but never used no-unused-vars
Line 35: ‹ activeTeam › is assigned a value but never used no-unused-vars
Line 118: ‹ limit › is assigned a value but never used no-unused-vars
Line 118: ‹ offset › is assigned a value but never used no-unused-vars
Line 721: ‹ recordList › is assigned a value but never used no-unused-vars
Line 722: ‹ action › is assigned a value but never used no-unused-vars
Line 745: ‹ recordList › is assigned a value but never used no-unused-vars
Line 746: ‹ fetch › is assigned a value but never used no-unused-vars
Line 746: ‹ update › is assigned a value but never used no-unused-vars
Line 854: ‹ checkWorkCenterTypeSelect › is assigned a value but never used no-unused-vars
Line 1071: ‹ stockMoveForm › is assigned a value but never used no-unused-vars
Line 1071: ‹ isNew › is assigned a value but never used no-unused-vars
./src/mobile/pages/production/operation-orders/view.js
Line 3: ‹ moment › is defined but never used no-unused-vars
Line 20: ‹ PageElement › is defined but never used no-unused-vars
Line 36: ‹ activeTeam › is assigned a value but never used no-unused-vars
Line 119: ‹ limit › is assigned a value but never used no-unused-vars
Line 119: ‹ offset › is assigned a value but never used no-unused-vars
Line 1377: ‹ operationOrderForm › is assigned a value but never used no-unused-vars
Line 1377: ‹ isNew › is assigned a value but never used no-unused-vars
./src/mobile/pages/production/manuf-order/view.js
Line 3: ‹ moment › is defined but never used no-unused-vars
Line 35: ‹ activeTeam › is assigned a value but never used no-unused-vars
Line 119: ‹ limit › is assigned a value but never used no-unused-vars
Line 119: ‹ offset › is assigned a value but never used no-unused-vars
Line 1153: ‹ manufOrderForm › is assigned a value but never used no-unused-vars
Line 1153: ‹ isNew › is assigned a value but never used no-unused-vars
./src/mobile/pages/production/operation-orders/list.js
Line 8: ‹ classNames › is defined but never used no-unused-vars
There were more warnings in other files.
You can find a complete log in the terminal.
catch exp TypeError: Failed to fetch
at Http. (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:64:1)
at Http.fetch (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:53:1)
at Http.request (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:93:1)
at Http.intercept (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:108:1)
at Http.post (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:133:1)
at c:\Developpement\erp\axelor-mobile\packages\web-client-adk\lib\services\http.rest.js:290:1
at RestService.intercept (c:\Developpement\erp\axelor-mobile\packages\web-client-adk\lib\services\http.rest.js:122:1)
at RestService.action (c:\Developpement\erp\axelor-mobile\packages\web-client-adk\lib\services\http.rest.js:289:1)
at http://localhost:3000/static/js/bundle.js:77109:29 {stack: ‹ TypeError: Failed to fetch
at Http.<anony…//localhost:3000/static/js/bundle.js:77109:29 ›, message: ‹ Failed to fetch ›}
Thanks

rsh-axelor · Avril 4, 2022, 2:00

Hello,

So basically, in your console most of errors seems warnings which doesn’t affect app in general.

I am providing you basic steps how you can check for your « Invalid url » issue.

Case 1:
If you are using local server for app and you have set proxy of same in your mobile app package.json
For app url in browser you need to use port of your app:

For an example if my app is running on 3000 port and server is on 8080 (serverURL: http://localhost:8080/axelor-erp)
then your package.json proxy will be: http://localhost:8080
App url will be: http://localhost:3000/axelor-erp

Case 2:
If you are using online server, make sure you have cors setting in your server as mentioned above.
add the same url in your app url.

Make sure your cookies are set properly. You might need to add « JSESSIONID » in cookies manually while working with browser.

If all this settings are done properly and still you are facing some issue. Kindly check your network API calls and let me know about it’s failed status and also let me know about your backend branches to understand the issue properly.

For APK generation you can follow steps mentioned here.

Thank you

bDurtaut · Avril 5, 2022, 7:04

Thnks a lot , when you said : « then your package.json proxy will be: http://localhost:8080 » , root package.json dont have a proxy attribute

rsh-axelor · Avril 5, 2022, 7:14

Hi,

You can add proxy as per your need.
So on this file,

github.com

axelor/axelor-mobile/blob/master/packages/web-ui/package.json

{
  "name": "web-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@axelor/web-client": "^0.1.0",
    "@axelor/web-client-adk": "^0.1.0",
    "@axelor/web-client-adk-module": "^0.1.0",
    "@axelor/web-client-node": "^0.1.0",
    "autoprefixer": "7.1.6",
    "babel-core": "6.26.0",
    "babel-eslint": "7.2.3",
    "babel-jest": "20.0.3",
    "babel-loader": "7.1.2",
    "babel-preset-react-app": "^3.1.0",
    "babel-runtime": "6.26.0",
    "bootstrap": "^3.3.7",
    "case-sensitive-paths-webpack-plugin": "2.1.1",
    "chalk": "1.1.3",
    "classnames": "^2.2.5",

This file has been truncated. show original

add below line as per your server url, add this line somewhere after line 64.
"proxy" : "http://localhost:8080",

Again proxy will be as per your server url and needed only for local servers.
restart app in case of proxy update
Thanks

bDurtaut · Avril 5, 2022, 7:52

Same problem with this modification

rsh-axelor · Avril 5, 2022, 8:08

Can you give me your api response and request details?

bDurtaut · Avril 5, 2022, 8:34

in console i have this
catch exp TypeError: Failed to fetch
at Http. (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:64:1)
at Http.fetch (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:53:1)
at Http.request (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:93:1)
at Http.intercept (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:108:1)
at Http.post (c:\Developpement\erp\axelor-mobile\packages\web-client\lib\http.js:133:1)
at c:\Developpement\erp\axelor-mobile\packages\web-client-adk\lib\services\http.rest.js:290:1
at RestService.intercept (c:\Developpement\erp\axelor-mobile\packages\web-client-adk\lib\services\http.rest.js:122:1)
at RestService.action (c:\Developpement\erp\axelor-mobile\packages\web-client-adk\lib\services\http.rest.js:289:1)
at http://localhost:3000/static/js/bundle.js:77109:29 {stack: ‹ TypeError: Failed to fetch
at Http.<anony…//localhost:3000/static/js/bundle.js:77109:29 ›, message: ‹ Failed to fetch ›}