HMR/Live Reloading broken after Webpack 5 rc.0 -> rc.1 update #2758
Comments
wojtekmaj
changed the title
|
Please create reproducible test repo, I think bug in |
|
Managed to narrow it down quite a lot. |
|
Interestingly, removing So I compared src.js in both cases looking for answer and found that: With .browserlistrc (no: when HMR not working) /******/
/************************************************************************/
/******/ // module cache are used so entry inlining is disabled
/******/ // startup
/******/ // Load entry module
/******/ __webpack_require__("./src/index.jsx");
/******/ __webpack_require__("./node_modules/webpack/hot/dev-server.js");
/******/ })()
;and without .browserlistrc (no: when HMR is working), /************************************************************************/
/******/ // module cache are used so entry inlining is disabled
/******/ // startup
/******/ // Load entry module
/******/ __webpack_require__("./src/index.jsx");
/******/ __webpack_require__("./node_modules/webpack-dev-server/client/index.js?http://localhost:3000");
/******/ __webpack_require__("./node_modules/webpack/hot/dev-server.js");
/******/ })()
; |
|
@wojtekmaj Can you provide |
|
Looks webpack-dev-server thinks it is not browser |
|
An example is in the repro repo linked above, but I tested these and all of them broke the build for me: Original: Original but lowercase: Thought it's maybe IE so removed and left just Chrome: |
|
@evilebottnawi looks like your diagnosis is correct, because adding |
|
Yes, we need to fix it in webpack-dev-server, hope I will find time on it, anyway you can send a PR |
|
I too am experiencing this issue, which renders HMR inoperative with webpack 5, though I'm using But the symptoms are the same, everything builds, but this is all that is output in the console: I did confirm, however, that rolling back to: "webpack": "5.0.0-beta.29",causes it to work again as expected: |
|
I can confirm that it works as expected with webpack https://github.com/webpack/webpack/compare/v5.0.0-rc.0..v5.0.0-rc.1 https://github.com/webpack/webpack/releases/tag/v5.0.0-rc.1 I can also confirm that if I add: target: 'web',…to the base webpack config, that the latest release does indeed work. |
|
I've pushed a pull request to fix it, can anyone with the problem try the branch with yarn's resolution? Just adding the below code to |
|
Using that @chenxsan I get: |
Sorry, have no idea what's going on here. Maybe you can remove the resolution and try to edit |
Also, browserslist does not seem to work here. See webpack/webpack-dev-server#2758
|
@chenxsan's fix works for me. Seems this issue happens when you have a |
|
@slightlyfaulty You're right here. As of webpack v5.0.0-rc.1 https://github.com/webpack/webpack/releases/tag/v5.0.0-rc.1, the |
|
Not sure if that helps, but it looks like this problem also occurs when the target is an array. |
Yup, the ability to set arrays as a target also came with webpack 5. Arrays are listed as a valid type in the webpack 5 docs, but not in the webpack 4 docs EDIT: If it helps, my current fix is to specify "web" as a target when developing and "browserslist" as a target when building for production: target: process.env.NODE_ENV === "development" ? "web" : "browserslist", |
Waiting on this issue webpack/webpack-dev-server#2758 to be fixed
Removing the target property from webpack.config.js also works fine for me for development purpose. |
|
@alexander-akait hope you get well soon! |
|
I have a working HMR setup here, in case it's useful to anyone: |
|
@alexander-akait no problem! Take care of yourself first ✌💊 |
|
Hi there, I have read through this thread and am not sure why the webpack config for my project does not seem to be working. I know that webpack-dev-server 4.0.0 recently came out a few weeks ago and has removed the need for a workaround of In the other project by carlrip, they get console output of: I think part of my problem is that I'm not getting those last two console logs. Thank you for any help! |
|
Remove |
ah, thank you @alexander-akait! I am assuming that by setting client: {
overlay: {
errors: true,
warnings: false,
},
} |
|
Anyway why you disable warnings? You can filter them, it is better |
|
Ah I just didn't want the warnings to show on the overlay, but they still show in the console in the browser and in my terminal. By filtering, are you talking about this stats object? I am unfamiliar with filtering |
|
@myou11 this https://webpack.js.org/configuration/other-options/#ignorewarnings, ideally you should not have warnings at all or control them by filtering |
😞 Can you send invite again, sorry... |
|
@alexander-akait done again 😉✌ |
|
@xavierfoucrier here interesting case, because |
|
@alexander-akait Ha ok I understand. Glad to share interesting use case with webpack team 🍻😉 I will follow the associated issue, just let me know if you still need access to the repository because it will evolve in the near weeks. Thanks! |
|
@xavierfoucrier yep, I will ping you if will need more information (but I have local version) |
|
having the same issue. tried every single fix mentioned here and still no luck...... const path = require("path");
require("dotenv").config();
const webpack = require("webpack");
module.exports = {
mode: process.env.NODE_ENV,
entry: {
main: ["./src/client/index.tsx"],
},
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build"),
},
devtool: "inline-source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
use: { loader: "ts-loader" },
exclude: /node_modules/,
},
{
enforce: "pre",
test: /\.js$/,
exclude: /node_modules/,
loader: "source-map-loader",
},
{ test: /\.js$/, loader: "source-map-loader" },
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin({
template: "./index.html",
}),
],
target: "web",
devServer: {
hot: true,
port: process.env.DEV_PORT,
historyApiFallback: true,
static: {
publicPath: "./build",
},
// contentBase: path.resolve(__dirname, "./build"),
proxy: {
"/": {
target: `http://localhost:${process.env.SERVER_PORT}`,
secure: false,
},
},
},
}; |
|
@dbehmoaras Please provide reproducible test repo |
|
Sure thing @alexander-akait thank you for offering your help. Please see below for a link to the repo. The app itself doesn't do anything yet. I've been focused on setting up the environment first before adding any functionality. The issue I'm running into is that when I change the text content inside of App.tsx, the change is only reflected after manually re-building bundle. https://github.com/ResearchGlobal/stockwatch The hierarchy is as follows: index.tsx renders App.tsx, which only includes a single div with some inner HTML. Feel free to ignore the Context provider for the time being as well as the testing suite. There is also a server.ts file which handles the back end inside the server directory. To get started - npm install, npm run build, and then npm run dev. |
remove: new webpack.HotModuleReplacementPlugin({
template: "./index.html",
}),It is automatically enable when static: {
publicPath: "./build",
},to static: {
directory: "./build",
},Other note: resolve: {
// `...` extends default extensions + your add own
extensions: [".web.js", ".ts", ".tsx", "..."],
},But the main problems is here: proxy: {
"/": {
target: `http://localhost:${process.env.SERVER_PORT}`,
secure: false,
},
},You proxy all request to your server, you need keep, for example: // Only HTML passed to your server
proxy: {
"/": {
target: `http://localhost:${process.env.SERVER_PORT}`,
secure: false,
bypass: function (req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
},
},
},Also not you need to add |
|
@alexander-akait thank you very much. I will try this right away and let you know if it helps. |
|
@alexander-akait worked like a charm! Thank you very much for your help! I am very grateful |
|
@alexander-akait quick follow up - if i add a proxy, is it correct to assume that i would need to add the bypass in the same way? |
|
If your requests are overlapping, i.e. you have |
|
ok that makes sense, thanks! |
|
I also had a problem with the DevServer, the pages were not refreshed. I added this code and it helped me. static: { P.S. Maybe I didn’t understand the problem, sorry, i’m a noob. But if someone faced the same problem it helps. |
|
|
use cnpm install , resolve.symlinks: false, make it happen. |
|
Hello, i come from 2022, is there any updates regarding the live reloading issue? |
and others
After upgrading from Webpack
5.0.0-beta.29to5.0.0-rc.3, I've noticed that HMR/Live Reloading stopped working, even though no other changes to the code were made.I investigated by updating it step by step and here's my outcome:
Code
Expected Behavior
HMR to work on Webpack version
5.0.0-rc.1to5.0.0-rc.3.Console output in
5.0.0-beta.29to5.0.0-rc.0:...and of course, on change...
Actual Behavior
HMR doesn't on Webpack version
5.0.0-rc.1to5.0.0-rc.3.Console output in
5.0.0-rc.3:...and silence after that.
I can see that Webpack is rebuilding, so I think Webpack part works fine. Refreshing the page manually also gets me the updated page. So only HMR/Live Reloading part must be broken.
The text was updated successfully, but these errors were encountered: