Comments (36)
It seems to be working
if (module['hot']) {
module['hot'].accept();
}
from webpack-hot-middleware.
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?
from webpack-hot-middleware.
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",
from webpack-hot-middleware.
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();
}
from webpack-hot-middleware.
I was running into this issue and calling
module['hot'].accept()
in browser like @zhyafe mentioned fixes it for me +1if (module['hot']) { module['hot'].accept(); }
It was already necessary with webpack 4...
from webpack-hot-middleware.
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,
from webpack-hot-middleware.
I was running into this issue and calling
module['hot'].accept()
in browser like @zhyafe mentioned fixes it for me +1if (module['hot']) { module['hot'].accept(); }
This solution worked for me by adding it to the main webpack entry point.
from webpack-hot-middleware.
who can solve it? it is so bad
from webpack-hot-middleware.
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
from webpack-hot-middleware.
@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
from webpack-hot-middleware.
+1
from webpack-hot-middleware.
Is this going to be addressed :)?
from webpack-hot-middleware.
Any ETA on this one ?:)
from webpack-hot-middleware.
+1 for this. any news?
from webpack-hot-middleware.
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
tofalse
in process-update.js inside the webpack-hot-middleware modulevar 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
from webpack-hot-middleware.
I believe this was fixed in Webpack webpack/webpack#12408
from webpack-hot-middleware.
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 .😥😥😥
from webpack-hot-middleware.
@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
},
},
],
},
from webpack-hot-middleware.
The same problem. I need help
from webpack-hot-middleware.
I've hacked with a performReload
because I can't wait for a proper fix: Xcraft-Inc@8562dac
from webpack-hot-middleware.
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.
from webpack-hot-middleware.
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
from webpack-hot-middleware.
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.
from webpack-hot-middleware.
Fork fix works, I guess we just have to wait for the fork to get merged into the main repository 😕
from webpack-hot-middleware.
Hi @glenjamin, any ETA on this fix?
Thanks in advance.
from webpack-hot-middleware.
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)
from webpack-hot-middleware.
@lukeapage So to fix this issue (#390), webpack/webpack#12408 must be addressed first right?
from webpack-hot-middleware.
@athrunsun yes either webpack needs a fix or this repo needs to work around it.
Workaround pr - #394
from webpack-hot-middleware.
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
from webpack-hot-middleware.
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 ?
from webpack-hot-middleware.
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
from webpack-hot-middleware.
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.
from webpack-hot-middleware.
Somebody can create reproducible test repo?
from webpack-hot-middleware.
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'
from webpack-hot-middleware.
Somebody can create reproducible test repo? I will fix
from webpack-hot-middleware.
我的「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 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.
from webpack-hot-middleware.
Related Issues (20)
- TypeError: cb is not a function HOT 1
- error TS2339: Property 'compilers' does not exist on type 'Compiler'. HOT 1
- Which package to use on a Deno server? HOT 1
- not work on webpack5 HOT 7
- Overlay is not working with Webpack 5 HOT 4
- Ignored an update to unaccepted module - No automatic page reloading with recent versions of webpack and react packages HOT 3
- Types are broken with Webpack 5 HOT 3
- `module.hot` is required ?
- enable use of other backends besides express
- when updating the example everything will break please update HOT 4
- ReDoS Vulnerability HOT 2
- Replace deprecated querystring component with builtin URLSearchParams API HOT 8
- Overlay is invalid in webpack5. Haven't you solved it yet? How long do you plan to publish it to the master? I hope you can reply
- Hot Updates not being handled by server HOT 2
- Opening 5+ tabs causes Express to hang indefinitely HOT 2
- webpack-hot-server-middleware on demand loading bug
- webpackv5 webpack-hot-server-middleware Compatibility problems HOT 1
- A Chrome specific issue, where requests are getting blocked after a handful of link clicks HOT 3
- Webpack 5: incorrect compilation error text output starting with "undefined undefined" HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-hot-middleware.