Browser tab freezes when running webpack-dev-server in development mode using remote Module Federation module

Question

Dependency versions:

• webpack: 5.73.0
• webpack-dev-server: 4.9.2

This occurs when running a host application via webpack-dev-server that consumes micro-apps via ModuleFederationPlugin.

Example host config:

module.exports = {
  entry: path.resolve(__dirname, "src/index.js"),
  mode: "development", // success when changed to "production"
  devServer: {
    port: 3000,
    client: {
      overlay: false,
    },
  },
  output: {
    path: path.resolve(__dirname, "./build"),
    publicPath: "/",
    filename: "[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-react"],
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "Host",
      remotes: {
        ExampleModule: `ExampleModule@${
          process.env.LOCAL_MODULE
            ? `http://localhost:3001/`
            : "https://example.com/examplemodule/"
        }remoteEntry.js`,
      },
      shared: [
        {
          react: { version: "16.13.0", singleton: true },
          "react-dom": { version: "16.13.0", singleton: true },
        },
      ],
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public/index.html"),
    }),
  ],
};

Example module config:

module.exports = {
  entry: path.resolve(__dirname, "src/index.js"),
  mode: "development", // set to "production" for build that is served statically
  devServer: {
    static: { directory: path.join(__dirname, "public") },
    port: PORT,
  },
  output: {
    path: path.resolve(__dirname, "./build"),
    publicPath:
      process.env.NODE_ENV === "development"
        ? `http://localhost:${PORT}/`
        : "https://example.com/examplemodule/",
    filename: "[name].[contenthash].js",
    clean: true,
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-react"],
        },
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "ExampleModule",
      library: { type: "var", name: "ExampleModule" },
      filename: "remoteEntry.js",
      exposes: {
        "./ExampleModule": "./src/ExampleModule",
      },
      shared: [
        {
          react: { version: "16.13.0", singleton: true },
          "react-dom": { version: "16.13.0", singleton: true },
        },
      ],
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public/index.html"),
    }),
  ],
};

When running both the host and ExampleModule via webpack-dev-server, the app works, consuming the module from localhost:3001 without issue.

However, when running the host via webpack-dev-server and consuming the production build of the module from a remote URL (using https://example.com/examplemodule/remoteEntry.js in the example above), the page becomes completely unresponsive immediately after the remote entry file is fetched. There is no output in the JavaScript console due to this, and there is no feedback in the CLI output, so there are no error messages to report. This occurs in any browser, and I am on macOS Monterey.

This only occurs when running webpack-dev-server for the host in the "development" Webpack mode. Switching to production mode will fix this issue. It also will not occur when serving the static build of the host, regardless of the Webpack mode used when creating the build.

Unfortunately, this is difficult to reproduce. I attempted to make an isolated example with a React host and remote module using the same dependencies and very similar webpack configs, but I cannot reproduce the issue this way yet, so it may be specific to application code I cannot share. I'm wondering if anyone else has experienced this.