create-react-app: react-scripts 3.3.0 / 3.3.1 -> [HMR] Waiting for update signal from WDS... in console (Edge not working still)
Describe the bug
I am pretty new to React, so bear with me please.
I tried setting up a new project in react and these are the default dependencies generated in package.json :
“react”: “^16.12.0”, “react-dom”: “^16.12.0”, “react-scripts”: “3.3.0”
After I run npm start I get a message in the console “[HMR] Waiting for update signal from WDS…”
The page still shows up and refreshes automatically whenever a change is made but it only works on Chrome and Mozilla.
For some reason Microsoft Edge doesn’t work anymore even though it did before
Did you try recovering your dependencies?
I tried going back to different versions of react or scripts and everything goes back to normal when I have : “react”: “^16.12.0”, “react-dom”: “^16.12.0”, “react-scripts”: “3.3.0-next.62”
Everything above "react-scripts": "3.3.0-next.62" gives the error in the console and Edge stops working.
Which terms did you search for in User Guide?
I tried npm run eject to configure the webpack.config but I am not really that experienced and couldn’t see a problem
Environment
System: OS: Windows 10 10.0.18363 CPU: (4) x64 Intel® Core™ i5-7500 CPU @ 3.40GHz Binaries: Node: 10.16.3 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.13.3 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.449.0 Internet Explorer: 11.0.18362.1 npmPackages: react: ^16.12.0 => 16.12.0 react-dom: ^16.12.0 => 16.12.0 react-scripts: 3.3.0 => 3.3.0 npmGlobalPackages: create-react-app: Not Found
Steps to reproduce
(Write your steps here:)
- npx create-react-app [NAME]
- npm start
- open console in browser
Expected behavior
No message in console. Microsoft Edge to show page.
Actual behavior
Message in console. Blank Page in Edge.
Edge with react-script: 3.3.0:
Edge with react-scripts: 3.3.0-next.62:
Chrome with react-script: 3.3.0 :
Chrome with react-scripts: 3.3.0-next.62:
Reproducible demo
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 20
- Comments: 32 (3 by maintainers)
I’m also experiencing the issue, the message just sits there at the console, but everything seems to be working
The one-liner temporary very hacky fix is to run the following in Git Bash:
This will add in
slashes: trueto line 66 of the./node_modules/react-dev-utils/webpackHotDevClient.jsfileI have the same issue.
While waiting for a fix, I create my projects with :
npx create-react-app project-name --scripts-version 3.2.0Please release new version with this fix. react-scripts@3.2.0 contain some moderate security issues.
try npm audit.
I just updated the demo repo to
react-scripts: 3.4.0and I am happy to announce that it works. The message in the console still shows up, but Microsoft edge works now out of the box.Great job React Team
I am closing the issue
@veronicapc92
check the source of the log in your browser, I’m sure you can find the file that triggers this message.
There is another thread on this issue here on Github (https://github.com/webpack/webpack-dev-server/issues/2154) and @shaheemMPM suggested:
_"Actually that is not an error it’s just normal working log But I also found that log annoying and get rid of it by commenting the log statement…
You can do it by following steps
Goto node_modules -> webpack -> hot folder Under that you’ll find a log.js file open that edit the section (comment the log under if(level === “info”) ) module.exports = function(level, msg) { if (shouldLog(level)) { if (level === “info”) { // console.log(msg); } else if (level === “warning”) { console.warn(msg); } else if (level === “error”) { console.error(msg); } } };"_
The first time I encountered this problem the solution above worked. However I am now building a simple To-do list (I’m new to React) and just commenting out the bit stated above doesn’t work. I was wondering, is there any other file in the node_modules folder that could be displaying the same informational message? If so, maybe commenting it out would help? I don’t know what to do to get rid of the issue and it’s hard to test anything if the message is popping up
This is the same result I have even though I updated to
react-scripts: 3.3.1You can clone the demo repo: __https://github.com/Dodobrat/react-scripts-error__
It is a bare bones create-react-app project, nothing else has been done.
For my quick Edge test, I set a breakpoint where the Syntax Error occurs, then pasted a reimplementation of url.format into the console.
The two slashes are missing in the original url.format() return value and that causes
new WebSocket(url)to throw a Syntax Error.Yes @willjopling . It appears on all browsers, yet it only breaks Microsoft Edge. Mozilla and Chrome work just fine. Currently I am developing with version
react-scripts: 3.3.0-next.62, which works just fine on all browsers and doesn’t give any messages in the browser. I guess we should just wait for a new version.