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

Question

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

WraithKenny opened this issue 4 years ago · 36 comments

WraithKenny commented 4 years ago

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.

wangxdmm commented 4 years ago

+1

👎1

Answer 1 · 2020-11-10T22:29:49.000Z

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?

Answer 2 · 2020-11-14T01:15:13.000Z

The same problem. I need help

Answer 3 · 2020-12-01T11:54:38.000Z

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

Answer 4 · 2020-12-03T12:34:57.000Z

Is this going to be addressed :)?

Answer 5 · 2020-12-03T12:38:50.000Z

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.

Answer 6 · 2021-01-04T10:55:59.000Z

who can solve it？ it is so bad

Answer 7 · 2021-01-12T09:52:18.000Z

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",

Answer 8 · 2021-01-13T15:05:22.000Z

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

Answer 9 · 2021-01-21T09:23:02.000Z

Any ETA on this one ?:)

Answer 10 · 2021-01-22T03:10:09.000Z

It seems to be working

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

Answer 11 · 2021-01-27T06:04:53.000Z

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

Answer 12 · 2021-02-10T03:13:56.000Z

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

Answer 13 · 2021-02-10T07:35:27.000Z

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

Answer 14 · 2021-02-27T18:31:12.000Z

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,

Answer 15 · 2021-03-14T16:25:21.000Z

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.

Answer 16 · 2021-04-09T02:30:26.000Z

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

Answer 17 · 2021-05-31T20:54:59.000Z

Hi @glenjamin, any ETA on this fix?

Thanks in advance.

Answer 18 · 2021-06-11T11:06:21.000Z

+1 for this. any news?

Answer 19 · 2021-06-12T13:53:28.000Z

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)

Answer 20 · 2021-06-12T14:55:57.000Z

@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

Answer 21 · 2021-10-07T21:49:51.000Z

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.

Answer 22 · 2021-11-06T02:00:04.000Z

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

Answer 23 · 2021-11-06T06:53:14.000Z

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

Answer 24 · 2021-11-10T10:13:18.000Z

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

Answer 25 · 2021-12-09T12:25:32.000Z

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

Answer 26 · 2022-03-16T13:08:27.000Z

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 ?

Answer 27 · 2022-03-21T12:43:08.000Z

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

Answer 28 · 2022-06-09T09:03:05.000Z

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

Answer 29 · 2022-10-12T04:20:45.000Z

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

Answer 30 · 2022-10-27T12:57:31.000Z

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.

Answer 31 · 2022-11-08T16:59:23.000Z

Somebody can create reproducible test repo?

Answer 32 · 2022-11-10T14:55:27.000Z

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'

Answer 33 · 2022-11-10T17:03:54.000Z

Somebody can create reproducible test repo? I will fix

Answer 34 · 2022-11-12T21:20:57.000Z

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

Answer 35 · 2023-11-03T07:14:28.000Z

我的「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.