'Transparent iFrame blocks mouse event when using react-scripts start
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.
Solution 1:[1]
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"
},
Solution 2:[2]
You need to upgrade React-Scripts to latest version
npm install react-scripts@latest
Solution 3:[3]
My solution npm install --save --save-exact [email protected] then rm -rf node_module && rm -rf package-lock.json y then npm install and npm start =)
Solution 4:[4]
Upgrading to react-scripts v5 that way made it work for me :
npm i [email protected]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | chokshen |
| Solution 2 | Phoxer |
| Solution 3 | Sebastian Medina |
| Solution 4 | Monstar |