Create-react-app: react-scripts 3.3.0 / 3.3.1 -> [HMR] Waiting for update signal from WDS... in console (Edge not working still)

[Dodobrat]

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(R) Core(TM) i5-7500 CPU @ 3.40GHz
Binaries:
Node: 10.16.3 - C:Program Filesnodejsnode.EXE
Yarn: Not Found
npm: 6.13.3 - C:Program Filesnodejsnpm.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:)

1. npx create-react-app [NAME]
2. npm start
3. 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

https://github.com/Dodobrat/react-scripts-error

[ianschmitz]

Sounds like a dupe of #8084

[Dodobrat]

I checked it and tried the suggested fix.
Microsoft Edge works now but this is not a solution. Anytime I install a new package it goes back to the previous version. Also the message still persists.

[willjopling]

I'm experiencing the issue as well, in my case this message appears in any browser that runs the app.

[Dodobrat]

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.

[jwandekoken]

I'm also experiencing the issue, the message just sits there at the console, but everything seems to be working

[pickicool]

I have the same issue.

While waiting for a fix, I create my projects with :
npx create-react-app project-name --scripts-version 3.2.0

[eino-makitalo]

I have the same issue.

While waiting for a fix, I create my projects with :
npx create-react-app project-name --scripts-version 3.2.0

It even helped just to change package.json version to "3.2.0" and delete node_modules directory

[atulcodex]

i have the same issue too everything working but i can't fetch data from API (jsonplaceholder api) any buddy got solution?

[digomes87]

02.01.2020 and the same here.
In my Mac OS X today in started a project react and when I tried use a api the "problem" happy. :(

[atulcodex]

02.01.2020 and the same here.
In my Mac OS X today in started a project react and when I tried use a api the "problem" happy. :(

Do you use Axios in this project?

[digomes87]

not

atul prajapati [e-mail] escreveu no dia sexta, 3/01/2020
à(s) 01:58:

02.01.2020 and the same here.
In my Mac OS X today in started a project react and when I tried use a api
the "problem" happy. :(
[image: Screen Shot 2020-01-02 at 15 13 14]
https://user-images.githubusercontent.com/5879047/71683840-6b6c4200-2d72-11ea-8261-28c7fdfbb089.png

Do you use Axios in this project?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/8153?email_source=notifications&email_token=ABM3KB7EJCX4G4GG5Q533STQ33AXHA5CNFSM4JZROMZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIAJDZY#issuecomment-570462695,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABM3KB32EUFDIGVHCRO7AP3Q33AXHANCNFSM4JZROMZQ
.

[atulcodex]

not atul prajapati [e-mail] escreveu no dia sexta, 3/01/2020 à(s) 01:58:
…
02.01.2020 and the same here. In my Mac OS X today in started a project react and when I tried use a api the "problem" happy. :( [image: Screen Shot 2020-01-02 at 15 13 14] https://user-images.githubusercontent.com/5879047/71683840-6b6c4200-2d72-11ea-8261-28c7fdfbb089.png Do you use Axios in this project? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#8153?email_source=notifications&email_token=ABM3KB7EJCX4G4GG5Q533STQ33AXHA5CNFSM4JZROMZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIAJDZY#issuecomment-570462695>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABM3KB32EUFDIGVHCRO7AP3Q33AXHANCNFSM4JZROMZQ .

i can't understand what are you trying to say

[djolesusername]

I have the same issue.

While waiting for a fix, I create my projects with :
npx create-react-app project-name --scripts-version 3.2.0

Thanks!

[atulcodex]

if you have already installed create-react-app. try to uninstall
create-react-app then directly

run this command

npx create-react-app project-name

to create your project :)

On Sat, Jan 4, 2020 at 1:57 AM Djordje Cvetkovic [e-mail]
wrote:

I have the same issue.

While waiting for a fix, I create my projects with :
npx create-react-app project-name --scripts-version 3.2.0

Thanks!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/8153?email_source=notifications&email_token=AJYYZNWRPZG3KKDKNEGSIJDQ36NTNA5CNFSM4JZROMZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEICAJ6Q#issuecomment-570688762,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AJYYZNULMQQG5IGXEEJZCBLQ36NTNANCNFSM4JZROMZQ
.

[terabaud]

For my quick Edge test, I set a breakpoint where the Syntax Error occurs, then pasted a reimplementation of url.format into the console.

url.format = function ({protocol, hostname, port, pathname}) {return protocol + '://' + hostname + ':' + port + pathname };

The two slashes are missing in the original url.format() return value and that causes new WebSocket(url) to throw a Syntax Error.

[seanfisher]

The one-liner temporary very hacky fix is to run the following in Git Bash:

sed --in-place -e "66a\    slashes: true," ./node_modules/react-dev-utils/webpackHotDevClient.js

This will add in slashes: true to line 66 of the ./node_modules/react-dev-utils/webpackHotDevClient.js file

[cbm-ssavajols]

Please release new version with this fix. [email protected] contain some moderate security issues.

try npm audit.

[Dodobrat]

The one-liner temporary very hacky fix is to run the following in Git Bash:

sed --in-place -e "66a\    slashes: true," ./node_modules/react-dev-utils/webpackHotDevClient.js

This will add in slashes: true to line 66 of the ./node_modules/react-dev-utils/webpackHotDevClient.js file

Yes it really is hacky and is NOT recommended to touch anything inside the node_modules folder.
Best use a slightly older version of the scripts:
"react-scripts": "3.2.0" or "react-scripts": "3.3.0-next.62"

[cbm-ssavajols]

Version 3.3.0-next.62 works fine.

But it's not a release version and cannot be used as production build for some reasons.

[Dodobrat]

Version 3.3.0-next.62 works fine.

But it's not a release version and cannot be used as production build for some reasons.

Did not know that, it works fine for development though until they release a new version.
I will keep track and post again with the updated test repository if a new version is released.

Latest version release is 2 months ago, hopefully we get an update by the end of February
__https://www.npmjs.com/package/react-scripts__

[md-seb]

The one-liner doesn't work for me. I can see /socksjs-node websocket messages:

↓ {"type":"log-level","data":"none"}    34  16:10:03.098
↓ {"type":"hot"}    14  16:10:03.098
↓ {"type":"liveReload"} 21  16:10:03.098
↓ {"type":"hash","data":"565c78254d7774882e6d"} 45  16:10:03.099
↓ {"type":"ok"} 13  16:10:03.099

But it's still an empty page and [HMR] Waiting for update signal from WDS... in console

[md-seb]

Got it working after killall node and restarting vs code.

[douglasrcjames]

Bumping this for relevance. Hoping the future release will fix this. Error is making it difficult to test before deploying.

[leantide]

Updated to react-scripts 3.3.1.
I observe slashes: true, on line 67 of ./node_modules/react-dev-utils/webpackHotDevClient.js.
I killed node. I restarted VS Code. I even rebooted.
Unfortunately, I still observe [HMR] Waiting for update signal from WDS... in console.

[ianschmitz]

Can anyone confirm if 3.3.1 fixes this issue for them? We fixed some issues with the usage of the WebSocket API that were introduced in 3.3.0.

[drew-thorson]

Still seeing the same issue with Edge.

Environment Info:
current version of create-react-app: 3.3.1

System:
OS: Windows 10 10.0.18362
Binaries:
Node: 12.15.0
Yarn: 1.19.1
npm: 6.13.7
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.1 => 3.3.1
npmGlobalPackages:
create-react-app: Not Found

[ianschmitz]

@drew-thorson that looks unrealted to this issue?

[Dodobrat]

@drew-thorson that looks unrealted to this issue?

This is the same result I have even though I updated to react-scripts: 3.3.1

You 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.

[veronicapc92]

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

[shaheemMPM]

@veronicapc92

check the source of the log in your browser, I'm sure you can find the file that triggers this message.

[jamespagedev]

I also tried to revert back to 3.2.0 by changing the react-scripts in my packages, deleting the node modules directory, and running npm install. It found 2 security vulnerabilities asking me to run "npm audit fix". Then I started the app and the issue was still not resolved.

[Dodobrat]

I just updated the demo repo to react-scripts: 3.4.0 and 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