webpack-hot-middleware/client?reload=true is no longer working with webpack 5.

[WraithKenny]

• Operating System: Mac
• Node Version: v14.14.0
• NPM Version: 6.14.8
• webpack Version: 5.1.3
• ${package} Version: 2.25.0

Expected Behavior

Expect circumstances that caused reload in webpack 4 would continue doing so in 5

Actual Behavior

Upgrading to webpack 5 causes reload to stop working, when it was with 4

Code

  // webpack.config.js
  // If your bitchin' code blocks are over 20 lines, please paste a link to a gist
  // (https://gist.github.com).

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

How Do We Reproduce?

Find code that reloads with webpack 4, and then upgrade to 5.

[029A-h]

Very same problem. I use express + webpack-dev-middleware + webpack-hot-middleware for live reloading on save.
After update to webpack 5 I can't longer use live reload with this console warning

process-update.js:22 Ignored an update to unaccepted module ./src/App.js -> ./src/index.js

Did anyone find a way to get rid of this bug?

[Krappt]

The same problem. I need help

[wangxdmm]

+1

[Skywalker13]

I've hacked with a performReload because I can't wait for a proper fix: Xcraft-Inc@8562dac

[kukjevov]

Is this going to be addressed :)?

[glenjamin]

There's been a few reports of webpack 5 issues, but I haven't had time to look into them.

None of my active projects currently use hot-middleware, so this isn't a high prioritiy for me to investigate.

If someone is able to produce a minimal reproducing case and then offer a PR which resolves it, I'd make time to review and merge it.

[mingyuyuyu]

who can solve it？ it is so bad

[lukeapage]

I believe it may be a webpack 5 bug. I also created a PR that works around it, but I have no idea what I am doing or if the fix is hacky.

I combined the 2 PR's that fix webpack 5 bugs on my forked master branch, feel free to use it in npm

git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572

e.g. for yarn

    "resolutions": {
        "webpack-hot-middleware": "git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572",

[glenjamin]

I combined the 2 PR's that fix webpack 5 bugs on my forked master branch, feel free to use it in npm

Thanks for doing this!

I'm intending to get around to this soonish, but i'm not getting a lot of free time at the moment

[phaistonian]

Any ETA on this one ?:)

[zhyafe]

It seems to be working

if (module['hot']) {
  module['hot'].accept();
}

[WanderWang]

I believe it may be a webpack 5 bug. I also created a PR that works around it, but I have no idea what I am doing or if the fix is hacky.

I combined the 2 PR's that fix webpack 5 bugs on my forked master branch, feel free to use it in npm

git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572

e.g. for yarn

    "resolutions": {
        "webpack-hot-middleware": "git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572",

I got the same problem and your solution can fix this issue , thank u .

I hope this project's maintainer can fix it as soon as possible

[TylerBarnes]

I was running into this issue and calling module['hot'].accept() in browser like @zhyafe mentioned fixes it for me 👍

if (module['hot']) {
  module['hot'].accept();
}

[Skywalker13]

I was running into this issue and calling module['hot'].accept() in browser like @zhyafe mentioned fixes it for me +1

if (module['hot']) {
  module['hot'].accept();
}

It was already necessary with webpack 4...

[williamoverton]

If you guys need a workaround, you can add ?reload=true to your entrypoint in you webpack config:

entry: ["webpack-hot-middleware/client?reload=true", "./src/index.tsx"],

You also need to change ignoreUnaccepted to false in process-update.js inside the webpack-hot-middleware module

var lastHash;
var failureStatuses = { abort: 1, fail: 1 };
var applyOptions = {
  ignoreUnaccepted: false,
  ignoreDeclined: true,
  ignoreErrored: true,

[weilinzung]

I believe it may be a webpack 5 bug. I also created a PR that works around it, but I have no idea what I am doing or if the fix is hacky.

I combined the 2 PR's that fix webpack 5 bugs on my forked master branch, feel free to use it in npm

git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572

e.g. for yarn

    "resolutions": {
        "webpack-hot-middleware": "git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572",

The same issue with Webpack 5, switch to this fork fix for now.

[Armster15]

Fork fix works, I guess we just have to wait for the fork to get merged into the main repository 😕

[nadun-wije]

Hi @glenjamin, any ETA on this fix?

Thanks in advance.

[mikejdegroot]

+1 for this. any news?

[glenjamin]

The latest state of webpack 5 support is that no-one has yet taken the time to understand what has actually changed and why that has caused a problem.

Once that research has been done and a fix incorporated into #397 then it can be merged and released properly.

This comment suggests the path forwards for anyone who is sufficiently motivated and has the time: #397 (comment)

[lukeapage]

@glenjamin i took the time way back when I made my work around or - and raised a bug with webpack - it’s a bit hidden so repeating it here webpack/webpack#12408

[fabrizzio-gz]

I was running into this issue and calling module['hot'].accept() in browser like @zhyafe mentioned fixes it for me +1

if (module['hot']) {
  module['hot'].accept();
}

This solution worked for me by adding it to the main webpack entry point.

[athrunsun]

@lukeapage So to fix this issue (#390), webpack/webpack#12408 must be addressed first right?

[lukeapage]

@athrunsun yes either webpack needs a fix or this repo needs to work around it.
Workaround pr - #394

[Trojan0523]

i meet that problem in vue tsx file hmr, is it fixed now ? i use module['hot'].accept() it doesn`t work , the page reload several times and turns to white

[hfsaito]

If you guys need a workaround, you can add ?reload=true to your entrypoint in you webpack config:

entry: ["webpack-hot-middleware/client?reload=true", "./src/index.tsx"],

You also need to change ignoreUnaccepted to false in process-update.js inside the webpack-hot-middleware module

var lastHash;
var failureStatuses = { abort: 1, fail: 1 };
var applyOptions = {
  ignoreUnaccepted: false,
  ignoreDeclined: true,
  ignoreErrored: true,

Found the same problem, forked the repo and did this change, worked for me

[msev]

Hi @lukeapage

Today, when i have tried your fix, this error is showing :

error Couldn't find match for "2cdfe0d0111dab6432b8683112fd2d17a5e80572" in "refs/heads/dependabot/npm_and_yarn/acorn-5.7.4,refs/heads/dependabot/npm_and_yarn/elliptic-6.5.3,refs/heads/dependabot/npm_and_yarn/example/acorn-5.7.4,refs/heads/dependabot/npm_and_yarn/example/elliptic-6.5.3,refs/heads/dependabot/npm_and_yarn/handlebars-4.7.6,refs/heads/dependabot/npm_and_yarn/lodash-4.17.19,refs/heads/dependabot/npm_and_yarn/mixin-deep-1.3.2,refs/heads/is-jest-any-good,refs/heads/master,refs/heads/patch-1,refs/tags/v1.0.0,refs/tags/v1.0.1,refs/tags/v1.1.0,refs/tags/v1.2.0,refs/tags/v2.0.0,refs/tags/v2.0.1,refs/tags/v2.0.2,refs/tags/v2.1.0,refs/tags/v2.10.0,refs/tags/v2.11.0,refs/tags/v2.12.0,refs/tags/v2.12.1,refs/tags/v2.12.2,refs/tags/v2.13.0,refs/tags/v2.13.1,refs/tags/v2.13.2,refs/tags/v2.14.0,refs/tags/v2.15.0,refs/tags/v2.16.0,refs/tags/v2.16.1,refs/tags/v2.17.0,refs/tags/v2.17.1,refs/tags/v2.18.0,refs/tags/v2.18.1,refs/tags/v2.18.2,refs/tags/v2.19.0,refs/tags/v2.19.1,refs/tags/v2.2.0,refs/tags/v2.2.1,refs/tags/v2.20.0,refs/tags/v2.21.0,refs/tags/v2.21.1,refs/tags/v2.21.2,refs/tags/v2.22.0,refs/tags/v2.22.1,refs/tags/v2.22.2,refs/tags/v2.22.3,refs/tags/v2.23.0,refs/tags/v2.23.1,refs/tags/v2.24.0,refs/tags/v2.24.1,refs/tags/v2.24.2,refs/tags/v2.24.3,refs/tags/v2.24.4,refs/tags/v2.25.0,refs/tags/v2.3.0,refs/tags/v2.4.0,refs/tags/v2.4.1,refs/tags/v2.5.0,refs/tags/v2.5.1,refs/tags/v2.6.0,refs/tags/v2.6.1,refs/tags/v2.6.2,refs/tags/v2.6.3,refs/tags/v2.6.4,refs/tags/v2.6.5,refs/tags/v2.7.0,refs/tags/v2.7.1,refs/tags/v2.8.0,refs/tags/v2.8.1,refs/tags/v2.9.0,refs/tags/v2.9.1" for "https://github.com/lukeapage/webpack-hot-middleware".

To resolve this error i have modified this line in package.json :

"webpack-hot-middleware": "git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572"

to :

"webpack-hot-middleware": "https://github.com/lukeapage/webpack-hot-middleware.git"

Is it a good solution ?

[ilhammeidi]

hi

I believe it may be a webpack 5 bug. I also created a PR that works around it, but I have no idea what I am doing or if the fix is hacky.

I combined the 2 PR's that fix webpack 5 bugs on my forked master branch, feel free to use it in npm

git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572

e.g. for yarn

    "resolutions": {
        "webpack-hot-middleware": "git+https://github.com/lukeapage/webpack-hot-middleware#2cdfe0d0111dab6432b8683112fd2d17a5e80572",

Hi @lukeapage This work for me. Thanks

[m10]

I believe this was fixed in Webpack webpack/webpack#12408

[townechow]

my situation
for "react": "^18.2.0"
at the root like this:

 createRoot(document.getElementById("app-root")).render(<Root />);

if (module.hot) {
   module.hot.accept();
}

it works, but this is a warning:

to fix this warning :
https://stackoverflow.com/questions/71792005/react-18-you-are-calling-reactdomclient-createroot-on-a-container-that-has-a

// https://stackoverflow.com/questions/71792005/react-18-you-are-calling-reactdomclient-createroot-on-a-container-that-has-a
let container = null;
document.addEventListener("DOMContentLoaded", function (event) {
  if (!container) {
    container = document.getElementById("app-root");
    const root = createRoot(container);
    root.render(<Root />);
  }
});
if (module.hot) {
   module.hot.accept();
}

the hot does not work any more, so i rolled it back .😥😥😥

[LeunensMichiel]

my situation for "react": "^18.2.0" at the root like this:
....

the hot does not work any more, so i rolled it back .😥😥😥

+1. I'm having the same issue as you (with the exact same setup/workarounds applied) and I'm not seeing why it's not working.

[alexander-akait]

Somebody can create reproducible test repo?

[weilinzung]

I can confirm with reload is still not working

    "webpack": "^5.75.0",
    "webpack-dev-middleware": "^5.3.3",
    "webpack-hot-middleware": "^2.25.3",

'webpack-hot-middleware/client?path=/__webpack_hmr&reload=true&overlay=true'

[alexander-akait]

Somebody can create reproducible test repo? I will fix

[weilinzung]

@alexander-akait I was able to create a test repo. However, I figured out that reload and overlay are both working fine in the test repo.

Long story short, I found out there is an issue in our custom CLI when turning off esModule from css-loader then the reload would not work.

  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          esModule: false, => remove this would fix the reload issue
        },
      },
    ],
  },

[NaHuGD]

我的「react」情況： 根部的「^18.2.0」如下：

 createRoot(document.getElementById("app-root")).render(<Root />);

if (module.hot) {
   module.hot.accept();
}

它有效，但這是一個警告：

修正此警告： https://stackoverflow.com/questions/71792005/react-18-you-are-calling-reactdomclient-createroot-on-a-container-that-has-a

// https://stackoverflow.com/questions/71792005/react-18-you-are-calling-reactdomclient-createroot-on-a-container-that-has-a
let container = null;
document.addEventListener("DOMContentLoaded", function (event) {
  if (!container) {
    container = document.getElementById("app-root");
    const root = createRoot(container);
    root.render(<Root />);
  }
});
if (module.hot) {
   module.hot.accept();
}

熱不再起作用了，所以我把它滾回去了。😥😥😥

pmmmwh/react-refresh-webpack-plugin#784

i resloved this issue by remove if (module.hot) {module.hot.accept()} from index.js.
But i'm not sure if this approach is correct.