Webpack-dev-server: [WDS] Disconnected! - Bug?

[chobo2]

Hi

I am having a problem where my webpack seems to get chocked up and then I lose connection. I usually have to recompile after one refresh

OS: Windows 7
Node: v8.10.0
NPM: 6.1.0
webpack: ^4.10.2
webpack-cli: ^2.1.4
webpack-dev-server: ^3.1.4
Chrome : 67.0.3396.79

Expected Behavior

When I hit the save button, it will refresh the google chrome page.

Actual Behavior

It will refresh on save maybe once or twice but after that the connection timesout and then disconnects.

For Bugs; How can we reproduce the behavior?

https://github.com/chobo2/WebpackTest

[waleedahmed3045]

I am getting this message HMR Not receive update signal from WDS and stuck in console console. My page is going in an infinite loading.

[Bounty31]

Also happening to me, it looks like it is happening since my Chrome updated to V67

[chobo2]

I think for me it been happening even before v67. I have to admit I never tried any other browser to see if they have the same problem.

[gs-ppara]

Open chrome://flags/#allow-insecure-localhost
Change 'Allow invalid certificates for resources loaded from localhost' to Enabled

It works for me (temporary workaround)

[chobo2]

@gs-ppara

It does not seem to work for me.

[DanielRuf]

Did you restart Chrome? Also which domain / hostname do you use for the server?

So far this is not a bug / issue in webpack. We have no control over the security settings of the browsers.

[DanielRuf]

Also see https://stackoverflow.com/questions/7580508/getting-chrome-to-accept-self-signed-localhost-certificate/31879393#31879393

[chobo2]

@DanielRuf

Yes I restarted Chrome. I am on localhost:8080.

I went to the stack page and I cannot find the option they are talking about in my version of chrome.

[DanielRuf]

And one of the bypasses? https://stackoverflow.com/a/47646463/753676

[chobo2]

@DanielRuf

I am not sure, I will try it but I am not really sure how to get to wherever I need to put a bypass in.

[chobo2]

Anyone have any other suggestions?

[cnyet]

@chobo2 I had this problem at the beginning，and because I set optimization.runtimeChunk to true in my webpack configuration. so when I removed optimization.runtimeChunk, it works completely. I hope it will help you.

[chobo2]

@cnyet

I don't think I have that flag set, I dont' see it in my webpack config, unless this is something on by default?

[colingreene28]

Unsure if this is related but I noticed that once I updated to Chrome v67 it was forcing localhost over https (or at least I think it was). I added https:true and that seemed to get me back up and running.

[011011100010110101101111]

@gs-ppara it not work for me.
i have restarted my chrome.
it is my chrome version ,

[011011100010110101101111]

I am a Chinese, my English is not very good, do not know how to express, but now I will encounter endless requests, causing my own server to be blocked。
Can someone give me some advice？
thanks!

[xxxfuwei]

@gitors , I have same problem. And my chrome version is 67.0.3396.99 just like you.

[xxxfuwei]

@gitors , can you fixed this problem?

[011011100010110101101111]

@xxxfuwei i reset my codes from gitlab to solve the problem.

[michael-ciniawsky]

@all Does this still happen with https://github.com/webpack/webpack-dev-server/pull/1434 (v3.1.5) ?

[WellspringCS]

I'm seeing this behavior too. Driving me nuts.

[chobo2]

I have not seen this problem since I switched over to webpack-serve though now it been deprecated(first it was said to be used over webpack-dev-server not they changed their minds).

I am scared to switch over because of this issue.

[WellspringCS]

I found a solution for my situation and posted about it here: webpack/webpack-dev-server#851

[alexander-akait]

@WellspringCS @chobo2 please create minimum reproducible test repo, thanks

[WellspringCS]

@evilebottnawi I apologize, but I cannot, the biggest reason being this: in order to solve the problem I did strip my project bare and rebuild it. And the issue did not resurface until I had added several layers of components and navigation, at which point I started having existential moments, wondering what to do. I finally tried the desperation already noted, and it worked. But it seems that in order to have the problem, you have to have some weight to your project, I can't deliver a working OAuth2/API solution to you, sadly.

I will clarify, however, that the key features that produced this problem for me were (and I'm not sure which, if any, are the necessary ingredients... I'm just listing some salient features):

1) OAuth security implemented by oidc-client
2) Angular 6+
3) angular materials
4) lazy loading

Here's the contents of my package.json

{
"name": "eqp-management-client",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve -o",
"startfresh": "ng serve -o",
"startprod": "ng serve -o --prod --configuration=production",
"startstaging": "ng serve -o --prod --configuration=staging",
"build": "ng build",
"buildprod": "ng build --configuration=production",
"buildstaging": "ng build --configuration=staging",
"buildwatch": "ng build --watch --delete-output-path false",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"ngsw": "node_modules/.bin/ngsw-config dist ngsw-config.json",
"ngsw-config": "node_modules/.bin/ngsw-config dist src/ngsw-config.json",
"ngsw-copy": "cp node_modules/@angular/service-worker/ngsw-worker.js dist/",
"build-prod-ngsw": "ng build --prod && npm run ngsw-config && npm run ngsw-copy",
"serve-prod-ngsw": "npm run build-prod-ngsw && http-server dist -p 8080"
},
"prettier": {
"printWidth": 80,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true
},
"private": true,
"dependencies": {
"@angular-devkit/core": "0.6.8",
"@angular/animations": "6.1.4",
"@angular/cdk": "^6.1.4",
"@angular/common": "6.1.4",
"@angular/compiler": "6.1.4",
"@angular/core": "6.1.4",
"@angular/forms": "6.1.4",
"@angular/http": "6.1.4",
"@angular/material": "^6.4.6",
"@angular/platform-browser": "6.1.4",
"@angular/platform-browser-dynamic": "6.1.4",
"@angular/pwa": "^0.7.5",
"@angular/router": "6.1.4",
"@angular/service-worker": "^6.1.4",
"@fortawesome/fontawesome-free": "^5.2.0",
"@ngrx/effects": "^6.1.0",
"@ngrx/store": "^6.1.0",
"@ngrx/store-devtools": "^6.1.0",
"automapper-ts": "^1.9.0",
"bootstrap": "4.1.0",
"core-js": "^2.4.1",
"cosmiconfig": "^5.0.5",
"fast-json-patch": "^2.0.6",
"hammerjs": "^2.0.8",
"idb": "^2.1.3",
"jquery": "^3.3.1",
"json2typescript": "^1.0.6",
"oidc-client": "^1.5.1",
"popper": "^1.0.1",
"popper.js": "^1.14.4",
"resize-observer-polyfill": "^1.5.0",
"rxjs": "^6.2.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.5",
"@angular/cli": "7.0.0-rc.1",
"@angular/compiler-cli": "6.1.4",
"@angular/language-service": "6.1.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"sockjs-client": "1.3.0",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "^2.9.2"
},
"main": "index.js"
}

[alexander-akait]

@WellspringCS It is hard to reproduce problem based on your information, i can't help without minimum reproducible test repo. We can contact via email and use NDA if you are afraid for the information in the project.

[WellspringCS]

Yes, I would be fine with that approach, and if I can be of help I'd gladly do so. Except that your posted name reads "I want to be evil" if read backwards. :) Or should I read it "live" ? So much riding on the translation!

[alexander-akait]

@WellspringCS translation game :smile:

[Frondor]

I see the HMR module is pinging to https://{network_address}:9443/sockjs-node/info?t=1548216186220 which times out for some reason. But if I manually access to that URL, changing network_address for localhost It finally returns 200.

webpack config

{

  devServer: {
    host: '0.0.0.0',
    port: 9443,
    disableHostCheck: true, // process.env.NODE_ENV === 'development'
    https: true,
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    useLocalIp: false,
  }
}

[alexander-akait]

Here there are lot of difference issues, so i am closing this issue, please open new a issue (with reproducible test repo) when you have some problems with latest version

[artemiusgreat]

To reproduce.
Running ASP.NET Core 3.0 with standard React Template in Visual Studio 2019 using react-scripts on https://localhost:44333/
No errors.
Executing npm upgrade

• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

Now I'm getting error.

  | ./node_modules/react-dev-utils/webpackHotDevClient.js | @ | webpackHotDevClient.js:60
  | __webpack_require__ | @ | bootstrap:785
  | fn | @ | bootstrap:150
  | 1 | @ | index.js:10
  | __webpack_require__ | @ | bootstrap:785
  | checkDeferredModules | @ | bootstrap:45
  | webpackJsonpCallback | @ | bootstrap:32
  | (anonymous) | @ | main.chunk.js:1

Meanwhile, when I start React app without Visual Studio just using npm run start, it starts on https://localhost:3000 without errors.

[Aceofspades25]

This can be reproduced as well using ASP.NET Core 3.1 with standard Angular Template (Angular 8) so long as you target Internet Explorer as your browser (It does not happen in Chrome)

Likewise when I start the Angular App without Visual Studio (npm start) then I get no script errors when visiting localhost:4200 using Internet Explorer.

Conditions for me appear to be that you must:

• Use Internet Explorer
• Serve an Angular SPA from ASP.NET Core (creating a port number different from the port generated from ng serve e.g. localhost:60348)
• Use Angular 8+ (errors do not happen when I scaffold an Angular 5.2.0 SPA)