Has anyone ever come across this issue?
When using react-scripts start, everything seems ok on first load. As soon as a change is made to a file, all the mouse event seem to stop working (can't click on buttons, inputs, no tooltips etc.), even though the browser appears to update.
If I refresh the page the events work again, until a file is changed.
This isn't a problem in production as the watcher isn't involved there.
Any ideas?
EDIT:
I've found the problem but I'm not sure what the solution is.
It appears that a iFrame is added to the DOM when the watcher reloads. It looks like it has something to do with licenses. The body within the iFrame is empty but there is some minified JS with a comment on the top line:
/*! For license information please see iframe-bundle.js.LICENSE.txt */
Does anyone know how to prevent this iFrame appearing.
My solution npm install --save --save-exact react-scripts@5.0.0 then rm -rf node_module && rm -rf package-lock.json y then npm install and npm start =)
This is what fixed it for me:
npm upgrade react-scripts
You need to upgrade React-Scripts to latest version
npm install react-scripts@latest
This works for me:
"react-error-overlay": "6.0.9",
and add the fixed dependency version to the resolutions section of your package.json:
"resolutions": {
"//": "See https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
},
Upgrading to react-scripts v5 that way made it work for me :
npm i react-scripts@5.0.0