Browser reloads infinitely when using multi-compiler mode

[chmanie]

• This is a bug
• This is a modification request

Code

See full example repository for reproduction here

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = [
    {
    mode: 'development',
    entry: './temp2.js',
    output: {
      filename: 'main2.js',
      path: path.resolve(__dirname, 'dist'),
    },
        plugins: [
            new HtmlWebpackPlugin(),
        ],
    },
    {
        mode: 'development',
        entry: './temp.js',
      output: {
        filename: 'main1.js',
        path: path.resolve(__dirname, 'dist'),
      },
    },
];

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 5.88 GB / 32.00 GB
  Binaries:
    Node: 16.8.0 - /usr/local/bin/node
    npm: 7.21.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 91.0.2
    Safari: 14.1.2
  Packages:
    html-webpack-plugin: ^5.3.2 => 5.3.2 
    webpack: ^5.52.0 => 5.52.0 
    webpack-cli: ^4.8.0 => 4.8.0 
    webpack-dev-server: ^4.1.0 => 4.1.0 

Expected Behavior

I'm expecting the page not to reload infinitely. If my configuration is not correct, I would like for webpack to tell me that in some way.

Actual Behavior

The page reloads in an infinite loop. I could extract the console output from Firefox. The following output is the only output in the console and happens before the reload is triggered:

[HMR] Cannot find update. Need to do a full reload! log.js:26:12
[HMR] (Probably because of restarting the webpack-dev-server) log.js:26:12

Important

It is important to note that this behaviour is not triggered in 100% of the cases. For me it roughly triggers in 1/3 of the cases, when using a more complex configuration (in the project I encountered this in), it's almost every time).

For Bugs; How can we reproduce the behavior?

Please see https://github.com/chmanie/webpack-hmr-bug to find information on how to reproduce the bug (it's quite easy).

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

Most likely problem in html-webpack-plugin, we do not magic here

[chmanie]

Okay thanks, I was on the edge to post it there instead, but the HMR message brought me here. I'll try my luck over there!

[alexander-akait]

Oh, found a problem

[alexander-akait]

You can't run multiple dev server on multiple compiler with web target, you need two dev server, but it is currently not supported

[alexander-akait]

Problem due HMR logic, we track hash of build but you have two builds, so hash changed when you change something in your another build

[alexander-akait]

Why do you need one dev server on multiple compilers, it is like independent builds in your case, so should be handled independent servers

[chmanie]

Some of my entry points just need to be handled differently (different output options). But for those I don't need another webserver. Is this not a valid use case?

For example, some of my files are libraries, and the main entry point is not.

[alexander-akait]

In this case you should use dependencies https://webpack.js.org/configuration/other-options/#dependencies, also due logic for static files handling and caches, you should always compile library firstly, when build main app, also for this you need two dev server an proxy library dev server, it is independent builds

[DylanPiercey]

This error also seems to surface if you have an isomorphic setup with both a node compiler and a web compiler.

[alexander-akait]

@DylanPiercey

This error also seems to surface if you have an isomorphic setup with both a node compiler and a web compiler.

Can you provide example? It should work

[DylanPiercey]

@alexander-akait ill make a simpler reproduction, but if you want to test quickly our Marko webpack example repo has this issue.

npm init marko -- --template webpack-express. Then npm run dev and edit src/pages/index/index.marko.

I’ll be downgrading this example today, and I’ll also create a more simplified reproduction. Will share once I have

[alexander-akait]

@DylanPiercey

npm init -- --template webpack-express

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/create---template - Not found
npm ERR! 404 
npm ERR! 404  'create---template@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:

without --

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/create-webpack-express - Not found
npm ERR! 404 
npm ERR! 404  'create-webpack-express@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:

[DylanPiercey]

Sorry, replying with code snippets via mobile is hard -_-. I updated the previous comment with the correct command.

[DylanPiercey]

@alexander-akait here is a more simplified reproduction: https://github.com/DylanPiercey/webpack-dev-server-issue-infinite-reload