A Chrome specific issue, where requests are getting blocked after a handful of link clicks

[Neeraj Mekala]

• Operating System: MacOS
• Node Version: v18.17.0
• NPM Version: 9.6.7
• webpack Version: 5.88.2
• ${package} Version:

Expected Behavior

Link navigations should just work.

Actual Behavior

After a handful (5 or more) of navigation clicks, I am noticing that the requests are staying pending for a while, see below for a sample request header.

**Noticed that this behavior is occurring only when I am running in Chrome, all other browsers are working just fine. Also, I don't have many tabs open and aware that there are some server connection limits. This issue is occuring consistently **

Code

Here is my webpack config

import webpack from "webpack";
import path from "path";

import type { Configuration as DevServerConfiguration } from "webpack-dev-server";
import type { Configuration } from "webpack";

const devServer: DevServerConfiguration = {
  port: 3000,
  hot: true,
};

const webpackConfig: Configuration = {
  mode: "development",
  devtool: "eval",
  entry: {
    "test-app": [
      "webpack/hot/dev-server",
      "eventsource-polyfill",
      "webpack-hot-middleware/client?reload=true",
      "./src/client/apps/test-app/App.tsx",
    ],
    "home-app": [
      "webpack/hot/dev-server",
      "eventsource-polyfill",
      "webpack-hot-middleware/client?reload=true",
      "./src/client/apps/home-app/App.tsx",
    ],
    "sign-up-app": [
      "webpack/hot/dev-server",
      "eventsource-polyfill",
      "webpack-hot-middleware/client?reload=true",
      "./src/client/apps/sign-up-app/App.tsx",
    ],
    "sign-in-app": [
      "webpack/hot/dev-server",
      "eventsource-polyfill",
      "webpack-hot-middleware/client?reload=true",
      "./src/client/apps/sign-in-app/App.tsx",
    ],
  },
  target: "web",
  output: {
    path: path.resolve(__dirname, "/"),
    publicPath: "/",
    filename: "js/[name].js",
  },
  devServer,
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  module: {
    rules: [
    {
          // Match `.js`, `.jsx`, `.ts` or `.tsx` files
          test: /\.[jt]sx?$/,
          loader: 'esbuild-loader',
          options: {
              target: 'es2020'
          }
      },
      { 
        test: /(\.css)$/, 
        use: ["style-loader", "css-loader"] },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["url-loader" ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

export default webpackConfig;

  // additional code, HEY YO remove this block if you don't need it

How Do We Reproduce?

[Even Stensberg]

Create a reproduction repository please

[Neeraj Mekala]

appreciate the quick response. Let me put together a sample repo for this.

[Neeraj Mekala]

Ok, in the process of creating a sample repo I ended up finding a fix for this. I added and changed below webpack sections into my existing setup:

added this

var hotMiddlewareScript =  'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=500&reload=true';

and changed my entry points code to this

entry: {
    "home-app": [ "./src/client/apps/home-app/App.tsx", hotMiddlewareScript ],
    "sign-up-app": [ "./src/client/apps/sign-up-app/App.tsx", hotMiddlewareScript ],
    "sign-in-app": [ "./src/client/apps/sign-in-app/App.tsx", hotMiddlewareScript ]
}

Please let me know if I am doing anything unusual with this change.