54

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.

Improve this question
4
  • can you put click event code with question Commented Jan 15, 2022 at 11:42
  • I wouldn't be posting anything different to the react examples here: reactjs.org/docs/handling-events.html The issue is likely environmental, I don't think specific code would be useful here Commented Jan 15, 2022 at 11:45
  • this will help you : stackoverflow.com/questions/53465983/… Commented Jan 15, 2022 at 12:03
  • 1
    Thanks for the suggestion but that isn't the same problem. I'll update the question to add more detail Commented Jan 15, 2022 at 13:23

5 Answers 5

Reset to default
20

This is what fixed it for me:

npm upgrade react-scripts
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Spot on :) I was using v4.* with react v17.*. Upgrade to v5 worked. Thanks very much!
Glad it wasn't just me. It's very frustrating! Anyone have any idea how this ended up in there? Unfortunatley running 5.0.0 gives me myriad other errors such as "Module not found: Error: Can't resolve 'fs' in 'C:\..."
So what do we do if v5 breaks because webpack 5 doesn't include polyfills anymore?
@MoritzRoessler See stackoverflow.com/a/71331978/3499115
I have the same problem but I do not have react-scripts installed
|
11

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"
},

Notice: please put this dependency into "resolutions":{ } of package.json. It won't work in "devDependencies" or "dependencies" .

Improve this answer

1 Comment

it works for me when I put react-error-overlay in both devDependencies and resolutions
3

You need to upgrade React-Scripts to latest version

npm install react-scripts@latest
Improve this answer

Comments

2

Upgrading to react-scripts v5 that way made it work for me :

npm i [email protected]
Improve this answer

1 Comment

This one helped me too.
1

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 =)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.