UI hangs and mouse is not responsive

[adrien19]

Hello,

I am wondering if anyone else encountered the same issue.

After running npm i && npm run start, a new browser window is opened with a form to create a new app. However, the fields (inputs and all UI buttons) are not responsive to user clicks. To enter for instance the name of the app, I have to use the keyboard Tab to navigate to the "application name" input field. I can then continue using the Tab to navigate to other fields. Even after creating the application, the UI is still not responsive to user clicks (ex: for creating models).

I suspect this may be related to the auto-generated main.css found in packages/client/src/assets/css/main.css. But I can't figure out what the issue is exactly in this file.

I've tested on Chrome and Safari browsers and the issue persists on both.

Any help/advise would be much appreciated!

[saloni137]

Hello @adrien19 , the issue is fixed.

[akanshSirohi]

@saloni137 This issue isn't fixed yet, today I cloned the repo and set up the project using npm i --force && npm run start and now I am facing the same issue.

[akanshSirohi]

This iframe is responsible for this behavior, if I remove this node then everything works fine.

[ravisojitra]

@akanshSirohi This seems to be issue of react devlopment repo. Please check the thread here. CRA team working on it.

[saschacontes]

Issue still exists

[ioannidesalex]

Same here.

[yaldram]

@akanshSirohi @ravisojitra I see you are using react-scripts 4.0.3 can you please try adding this in our package.json - "resolutions": { "react-error-overlay": "6.0.9" },. I think this will only work if you are using yarn, might work with npm too. This issue is solved in cra-5 though. I think you should think of upgrading create-react-app to create-react-app version 5.

[ravisojitra]

Thank you @yaldram for suggesting this. will it be okay for you to submit PR for this solution?

[yaldram]

I did triage this issue, but given the fact that you are using process.env in your client for the api url you have installed react-error-overlay, I did upgrade the project locally to react-scripts 5.0 but when I uninstalled react-error-overlay I was getting an error for the process.env.REACT_APP_PROJECT_SERVICE_URL used here packages/client/src/api/constants.js. So if you plan to upgrade to react-scripts 5.0 you have to uninstall react-error-overlay and won't be able to use process.env.REACT_APP_PROJECT_SERVICE_URL.

[yaldram]

@ravisojitra I was able to migrate the client project to https://vitejs.dev/. There were a couple of major changes -

• Need to rename .js files to .jsx
• Instead of using react-loadable which was last published 4 years ago not updated since, I used React.lazy and Suspense in the Root.jsx for lazy loading the routes. Let me know if you want me to raise a pull request.

[ravisojitra]

@yaldram that's great. However as you mentioned in previous comment that those process.env variables are not working. So is it working after migrating it to vitejs?

[yaldram]

@ravisojitra In vite we have a separate way of using environment variables, so in the .env file I have -

VITE_APP_PROJECT_SERVICE_URL='http://localhost:3053'

and in the constants.js file I am using it like so -

const projectServiceUrl = import.meta.env.VITE_APP_PROJECT_SERVICE_URL;

You have to change the REACT_APP to VITE_APP.

[yaldram]

@ravisojitra also with vite 3.0 the latest release we need node 16 and above for it to work, otherwise we face a node:path error. But I was able to build the client project in about 1.08 seconds on my wsl setup. I also served the client project everything was working for me. You might need to do a full testing of the app if you plan to move forward with vite.

[ravisojitra]

@yaldram Thanks for the response. Can you please submit PR for this? I would love to merge it if everything's working well.

[yaldram]

@ravisojitra here you go - https://github.com/DhiWise/dhiwise-nodejs/pull/35