webpack-dev-server: HMR not working with multiple entries

@slightlyfaulty setting optimization.runtimeChunk: "single" fixed the problem for me.

@khelkun I recently discovered that if you use the dependOn option for an entry, then it will use the runtime that’s embedded in the entry it depends on.

In this case you don’t need to use runtimeChunk: 'single' anymore, as long as the dependOn entry is always loaded first.

@slightlyfaulty Found solution:

<script type="text/javascript" src="dist/runtime.js"></script>
<script type="text/javascript" src="dist/first.js"></script>
<script type="text/javascript" src="dist/second.js"></script>
<script type="text/javascript" src="dist/third.js"></script>

optimization: {
  runtimeChunk: 'single'
},

Exactly the same problem and same warnings as @onetrev on webpack 5.9.18 On 4.46 HMR for multiple entries works fine.

HI, @alexander-akait for HMR not working with multiple entries i upgrade webpack-dev-server from v4.0.0-rc.1 to v4.0.0 it will infinite loop for update.json 404. i use "webpack": "^5.50.0", BTW:
webpack-dev-server@4.0.0-rc.1 with webpack@^5.50.0it work fine.webpack-dev-server@4.0.0 with webpack@^5.50.0 was broken, infinite loop for update.json

@sokra If it’s not possible in Webpack 5 then fair enough. I think there are just a lot of people, like myself, who were doing this in Webpack 4 and it worked perfectly out the box.

Perhaps this limitation of Webpack 5 should be added to the migration guide if it isn’t already.

I also encountered this issue with multiple entries. However setting optimization.runtimeChunk: "single" didn’t work. I’m using multiple HtmlWebpackPlugins to serve the entries as solo applications. What is the best step for now? Move back to webpack@4.46.0?

Thanks for the tip @MohsenElgendy, but it’s still not really ideal as you need to then load the runtime chunk alongside your other bundles. Webpack 4 handled embedding the runtime in multiple bundles at the same time no problem.

@chenwenqin Can you provide reproducible example?

You can’t use multiple entries on the same page, please use https://github.com/webpack/webpack-dev-server/issues/2792#issuecomment-806983882

@erikt9 What is the problem? Infinity loop? Can you provide example?

@alexander-akait The problem I was having looks to be fixed in 4.2.1. Thank you!

Imported modules are initialized for each runtime chunk separately, so if you include multiple entry points on a page, beware of this behavior. You will probably want to set it to single or use another configuration that allows you to only have one runtime instance. From https://webpack.js.org/configuration/optimization/#optimizationruntimechunk.This method helped me solve the problem.

Other idea - output the warning in runtime and provide example how to fix it for better DX

Please test https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.1, we will speed up releases, to be stable at the end of month

I can also confirm optimization.runtimeChunk: “single” fixed the problem for me handling multiple bundles.

webpack.dev.config

module.exports = () => {
  const config = {
    mode: 'development',
    // Map your compiled code back to your original source code.
    devtool: 'inline-source-map',
    target: 'web',
    output: {
      filename: '[name].js',
      // specify chunck path for code splitted files
      chunkFilename: '[name].js',
    },
    devServer: {
      historyApiFallback: true,
      contentBase: path.resolve(__dirname, '../dist'),
      publicPath: '/',
      open: true,
      compress: true,
      hot: true,
      port: 8080,
    },
    plugins: [
      new ESLintPlugin({
        extensions: ['js', 'ts'],
      }),
      new StylelintPlugin(),
      new webpack.HotModuleReplacementPlugin(),
    ],
    optimization: {
      // don't minimize so we can debug
      minimize: false,
      /*
        The value 'single' instead creates a runtime file to be shared for all generated chunks.
        https://github.com/webpack/webpack-dev-server/issues/2792
      */
      runtimeChunk: "single",
    },
  };
  return merge(common('development'), config);
};

webpack.common.js

module.exports = (env) => {
  const isProduction = env === 'production';

  ...

  return {
    target: 'web',
    entry: {
      main: [
        './src/js/index.js',
        './src/ts/index.ts',
      ],
      // webpack code splitting example file
      examples: [
        './src/js/examples.js',
      ],
    },
    output: {
      path: path.join(__dirname, '../dist'),
      publicPath: '/',
    },

  ...

};