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

It seems to be working

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

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?

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 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();
}

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,

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…

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.

@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 https://github.com/webpack/webpack/issues/12408

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

who can solve it？ it is so bad

@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
        },
      },
    ],
  },

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 .😥😥😥

I believe this was fixed in Webpack https://github.com/webpack/webpack/issues/12408

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

+1 for this. any news?

Any ETA on this one ?😃

Is this going to be addressed 😃?

+1