HMR warnings after upgrading to Webpack 5.10.0

[paambaati]

Bug report

After upgrading to Webpack 5.10.0, I see this warning a lot on the console —

warn  - HotModuleReplacementPlugin
The configured output.hotUpdateMainFilename doesn't lead to unique filenames per runtime and HMR update differs between runtimes.
This might lead to incorrect runtime behavior of the applied update.
To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename option, or use the default config.

Everything seems to work fine, though.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Upgrade Webpack to 5.10.0
2. Use next to run a Next.js app in dev mode.
3. Make changes to a SSR page that is currently open in a browser so that HMR can kick in and auto-reload the page.
4. See warning on console —

   warn  - HotModuleReplacementPlugin
   The configured output.hotUpdateMainFilename doesn't lead to unique filenames per runtime and HMR update differs between runtimes.
   This might lead to incorrect runtime behavior of the applied update.
   To fix this, make sure to include [runtime] in the output.hotUpdateMainFilename option, or use the default config.
   

Expected behavior

No warnings.

Screenshots

N/A

System information

• OS: macOS
• Browser (if applies): Microsoft Edge
• Version of Next.js: 10.0.3
• Version of Node.js: v15.3.0
• Deployment: next (Dev mode)

Additional context

N/A

[awareness481]

Likely related to #18678

[Timer]

Duplicate of #18678

[timneutkens]

I can't reproduce this warning with the latest version of webpack 5 and next@canary 🤔

[paambaati]

@timneutkens I just checked out canary and I'm still seeing these warnings in 10.0.4-canary.3 and 5.10.0. Is there additional information I could provide to narrow this down?

[paambaati]

@timneutkens I have a small repro here — https://github.com/paambaati/nextjs-webpack-worker-bug-repro

[ivan-aksamentov]

I was able to workaround this by prepending [runtime]- to the webpackConfig.output.hotUpdateChunkFilename and webpackConfig.output.hotUpdateMainFilename. Looks like this is the "new" Webpack 5 way. Probably should not be used with Webpack 4. Not sure about Webpack 5 versions before this change.

Taken from shellscape/webpack-plugin-serve:

Discussion:
shellscape/webpack-plugin-serve#206 (review)

Codez:
Evalon/webpack-plugin-serve@1dd1f37#diff-cf84b31417a308f8c05eaf8c08b5caf04ad3fbd8c83f41e3f7546c1955c18f3f

Update: Turns out this workaround also breaks the hot reloading. Code changes trigger full page reloads. :(

[subwaymatch]

My workaround is to add .[runtime] in the config.output.hotUpdateMainFilename option.

Below is my next.config.js file:

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config, { isServer, dev, webpack }) => {
    console.log(`Webpack version: ${webpack.version}`);

    config.output.hotUpdateMainFilename =
      "static/webpack/[fullhash].[runtime].hot-update.json";

    if (!isServer) {
      config.resolve.fallback.fs = false;
    }

    return config;
  },
};

This is based on Nextjs' default config:

next.js/packages/next/build/webpack-config.ts

Lines 898 to 900 in cd9bb98

	hotUpdateMainFilename: isWebpack5
	? 'static/webpack/[fullhash].hot-update.json'
	: 'static/webpack/[hash].hot-update.json',

[paescuj]

Can we please reopen this? Still seeing those warnings in Next.js 11.

[timneutkens]

Can we please reopen this? Still seeing those warnings in Next.js 11.

Please open a new issue with a full reproduction.

[paescuj]

Can we please reopen this? Still seeing those warnings in Next.js 11.

Please open a new issue with a full reproduction.

Will do, thanks!

[paescuj]

Sorry, I'm not able to provide a full reproduction since I don't know what's causing it. I'll open a new issues when having more information and using workaround from #19865 (comment) in the meantime.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.