Webpack middleware/HMR errors or times out if multiple tabs open to localhost

[paulirwin]

Using ASP.NET Core MVC targeting .NET Framework 4.6.2 and Microsoft.AspNetCore.SpaServices v1.1.1, and on the npm side aspnet-webpack 2.0.1, aspnet-webpack-react 3.0.0, webpack 2.7.0, and webpack-hot-middleware 2.18.2. OS is Windows 10, using Chrome 60 and VS2017 15.2, Node 8.2 and 8.3 both affected.

Steps to reproduce:

1. Launch a non-trivial ASP.NET Core / React / Webpack app while debugging in VS2017 using SpaServices, React, HMR, etc. Ensure you do not have any localhost tabs open in your browser (Chrome in this case). For appropriate scale, the webpack task when run from the command line takes about 9 seconds to run and generates a few MB of un-optimized JavaScript in non-production mode.
2. Ensure your webpack bundle builds and runs fine in the browser with a single localhost tab open.
3. Right click the tab in the browser and choose Duplicate tab. (Or in Firefox, copy the URL and open a new tab to that URL.)
4. Refresh either tab. Requests to the bundle files time out or return a 500 server error with no helpful information.
5. Close either tab and refresh the remaining open one. Bundle loads at normal speed as expected.

Multiple teams at my company working on entirely different products with no shared code have encountered this problem. They describe it as happening "sporadically", but I have now diagnosed it down to only happening when multiple tabs are open in your browser to the same localhost site with HMR connected. If you only have one localhost tab open it works great, more than one and it slows to a crawl, timing/erroring out for larger bundles. This appears to be some kind of race condition or deadlock. Confirmed that this happens in Firefox as well, so it appears to be something on the server side.

[android2221]

This is likely an issue with VS debugging getting in the way of HMR, or vice versa - I am able to open multiple (> 3) tabs to localhost when running the react/redux/asp.net app. I am able to reload each tab independently without error and updates to my components are being pushed without issue. I am using a mac and VS Code currently.

I am happy to try this on my Windows machine w/ VS 2017 tomorrow to see what that brings while attached and debugging. Have you tried just spinning up the project with command line to get Visual Studio out of the way?

[paulirwin]

I currently am unable to run our app using dotnet run on the command line for an unrelated reason that will take me much longer to resolve, but I did try doing Start Without Debugging in VS2017 and the issue still happens. We are using IIS Express.

[paulirwin]

I went over to one of our other teams that is able to run their app on the command line with dotnet run and it still happens. We then disabled HMR in the middleware options object and the issue no longer happens, so it is definitely HMR-related. Also if it matters, both teams are using at-loader and TypeScript with React, and ReactHotModuleReplacement set to true.

[MarkPieszak]

This might potentially be simply a webpack/HMR issue as there are multiple web socket connections to each one of these browsers running the project. Do you have multiple open simply to test a site in different browsers simultaneously?

[paulirwin]

@MarkPieszak Actually the scenario we encounter regularly is just using one browser (usually Chrome) with multiple tabs. What I was doing when I realized the problem was multiple-tab-related was I had duplicated the tab so that I could jump back and forth between tabs where each tab was on a different page so I could compare. As soon as I did that, bundles stopped building, or at least slowed down to a completely unacceptable crawl (minutes).

[android2221]

Care to upload your package.json? Curious to see if you're on some versions of things that bring this error to light. I am running the most recent version of the SPA templates. I have made a couple changes to versions in my package.json to accommodate some of the recent changes to these templates. I'll try to spin up a project with your package.json and see what happens.

[paulirwin]

"devDependencies": {
    "@types/bootstrap": "^3.3.34",
    "@types/jquery": "^3.2.5",
    "@types/material-ui": "^0.17.14",
    "@types/react": "^15.6.0",
    "@types/react-dom": "^15.5.1",
    "@types/react-hot-loader": "^3.0.3",
    "@types/react-router": "^4.0.12",
    "@types/react-router-dom": "^4.0.5",
    "@types/react-select": "^1.0.48",
    "@types/toastr": "^2.1.34",
    "@types/webpack": "^3.0.4",
    "@types/webpack-env": "^1.13.0",
    "@types/webpack-hot-middleware": "^2.15.0",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "^3.1.3",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.4",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^2.1.2",
    "node-sass": "^4.5.3",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "raw-loader": "^0.5.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "typescript": "^2.4.1",
    "webpack": "^2.7.0",
    "webpack-hot-middleware": "^2.18.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "chart.js": "^2.6.0",
    "jquery": "^3.2.1",
    "material-ui": "^0.18.5",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-select": "^1.0.0-rc.5",
    "react-tap-event-plugin": "^2.0.1",
    "redux": "^3.7.1",
    "rigby": "^1.5.2",
    "toastr": "^2.1.2"
  }

[android2221]

I am still not able to duplicate this - I am just using the kestrel server for local development. I could speculate wildly about what I think the issue is but I don't want to lead you astray 😃

[SteveSandersonMS]

Thanks @android2221 for trying to debug this.

I've been trying to repro it too, but without success. I set up an app that takes 10s to complete its webpack build, using the React-Redux template, using awesome-typescript-loader, and following the process to make multiple tabs connected to the same HMR endpoint on localhost. But it continues to work fine.

@paulirwin If you're able to track down a minimal repro that surfaces this issue I'd be happy to have a look. Besides that I'm not sure there are other actions I can take on this :(

[paulirwin]

@SteveSandersonMS Thanks for looking into this. Do you know of any open-source repos I can try to reproduce this on? Another variable I thought of is that both of our projects where we have this issue have multiple entry points so multiple bundles loaded on the page. I'll see if I can come up with an equivalent example and try to reproduce.

[paulirwin]

I upgraded our site to use ASP.NET Core 2.0 including SpaServices 2.0 and this issue seems to be resolved. Thanks @SteveSandersonMS and @android2221 for trying to reproduce this and believing that I'm not crazy 😄