Skip to content

HMR/Live Reloading broken after Webpack 5 rc.0 -> rc.1 update #2758

Closed
Closed
HMR/Live Reloading broken after Webpack 5 rc.0 -> rc.1 update#2758

Description

@wojtekmaj
wojtekmaj
opened on Oct 6, 2020
  • Operating System: macOS Big Sur
  • Node Version: 14.5.0
  • NPM Version: 6.14.5
  • webpack Version: 5.0.0-rc.3
  • webpack-dev-server Version: ^3.10.3
  • Browser: Chrome
  • This is a bug
  • This is a modification request

After upgrading from Webpack 5.0.0-beta.29 to 5.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:

Version Works?
5.0.0-beta.29 Yes ✅
5.0.0-beta.30 Yes ✅
5.0.0-beta.31 Yes ✅
5.0.0-beta.32 Yes ✅
5.0.0-beta.33 Yes ✅
5.0.0-rc.0 Yes ✅
5.0.0-rc.1 No ❌
5.0.0-rc.2 No ❌
5.0.0-rc.3 No ❌

Code

// webpack.config.js
const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';
const isDevelopment = !isProduction;

const publicPath = process.env.PUBLIC_URL || '/';

module.exports = {
  mode: isProduction ? 'production' : 'development',
  bail: isProduction,
  entry: {
    src: [
      './src/index.jsx',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath,
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ].filter(Boolean),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
  ].filter(Boolean),
  devServer: {
    historyApiFallback: true,
    hot: true,
    port: 3000,
  },
};

Expected Behavior

HMR to work on Webpack version 5.0.0-rc.1 to 5.0.0-rc.3.

Console output in 5.0.0-beta.29 to 5.0.0-rc.0:

[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
[WDS] Live Reloading enabled.

...and of course, on change...

[WDS] App updated. Recompiling...
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./components/pages/index.jsx
[HMR] App is up to date.

Actual Behavior

HMR doesn't on Webpack version 5.0.0-rc.1 to 5.0.0-rc.3.

Console output in 5.0.0-rc.3:

[HMR] Waiting for update signal from WDS...

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

Activity

  1. wojtekmaj
    changed the title [-]HMR/Live Reloading broken after Webpack 5 beta.33 -> rc.3 update[/-] [+]HMR/Live Reloading broken after Webpack 5 rc.0 -> rc.1 update[/+] on Oct 6, 2020

  2. alexander-akait commented on Oct 6, 2020

    @alexander-akait
    alexander-akait
    on Oct 6, 2020
    Member

    Please create reproducible test repo, I think bug in webpack-dev-server

  3. wojtekmaj commented on Oct 6, 2020

    @wojtekmaj
    wojtekmaj
    on Oct 6, 2020
    ContributorAuthor

    Managed to narrow it down quite a lot.

    Webpack HMR bug repro.zip

  4. wojtekmaj commented on Oct 6, 2020

    @wojtekmaj
    wojtekmaj
    on Oct 6, 2020
    ContributorAuthor

    Interestingly, removing .browserlistrc seems to fix the issue.

    So I compared src.js in both cases looking for answer and found that:

    With .browserlistrc (no: when HMR not working) src.js ends with:

    /******/ 	
/************************************************************************/
/******/ 	// 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), src.js ends with:

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

  5. alexander-akait commented on Oct 6, 2020

    @alexander-akait
    alexander-akait
    on Oct 6, 2020
    Member

    @wojtekmaj Can you provide .browserlistrc?

  6. alexander-akait commented on Oct 6, 2020

    @alexander-akait
    alexander-akait
    on Oct 6, 2020
    Member

    Looks webpack-dev-server thinks it is not browser

  7. wojtekmaj commented on Oct 6, 2020

    @wojtekmaj
    wojtekmaj
    on Oct 6, 2020
    ContributorAuthor

    An example is in the repro repo linked above, but I tested these and all of them broke the build for me:

    Original:

    Chrome >=72
Firefox >=66
IE >=11

    Original but lowercase:

    chrome >=72
firefox >=66
ie >=11

    Thought it's maybe IE so removed and left just Chrome:

    Chrome >=72

  8. wojtekmaj commented on Oct 6, 2020

    @wojtekmaj
    wojtekmaj
    on Oct 6, 2020
    ContributorAuthor

    @evilebottnawi looks like your diagnosis is correct, because adding target: 'web' (which overwrites the default being 'browserlist' since 5.0.0-rc.1) to Webpack config resolves the issue.

  9. alexander-akait commented on Oct 6, 2020

    @alexander-akait
    alexander-akait
    on Oct 6, 2020
    Member

    Yes, we need to fix it in webpack-dev-server, hope I will find time on it, anyway you can send a PR

  10. khalwat commented on Oct 12, 2020

    @khalwat
    khalwat
    on Oct 12, 2020

    I too am experiencing this issue, which renders HMR inoperative with webpack 5, though I'm using @babel/preset-env rather than .browserlistrc.

    But the symptoms are the same, everything builds, but this is all that is output in the console:

    [HMR] Waiting for update signal from WDS...

    I did confirm, however, that rolling back to:

            "webpack": "5.0.0-beta.29",

    causes it to work again as expected:

    [HMR] Waiting for update signal from WDS...
index.js:48 [WDS] Hot Module Replacement enabled.
index.js:52 [WDS] Live Reloading enabled.

  11. khalwat commented on Oct 12, 2020

    @khalwat
    khalwat
    on Oct 12, 2020

    I can confirm that it works as expected with webpack 5.0.0-rc.0 but breaks with 5.0.0-rc.1 so the error is here somewhere:

    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.

  12. chenxsan commented on Oct 12, 2020

    @chenxsan
    chenxsan
    on Oct 12, 2020
    Contributor

    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 package.json and run yarn install --force

      "resolutions": {
    "webpack-dev-server": "git://github.com/chenxsan/webpack-dev-server#bugfix/fix-hmr-browserslist"
  }

  13. khalwat commented on Oct 12, 2020

    @khalwat
    khalwat
    on Oct 12, 2020

    Using that @chenxsan I get:

    webpack_1  | > webpack-dev-server --config webpack.dev.js --trace-deprecation
webpack_1  |
webpack_1  | Error: Cannot find module '../../client/'
webpack_1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
webpack_1  |     at Function.resolve (internal/modules/cjs/helpers.js:19:19)
webpack_1  |     at addEntries (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/addEntries.js:39:36)
webpack_1  |     at updateCompiler (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/updateCompiler.js:48:5)
webpack_1  |     at new Server (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/Server.js:72:5)
webpack_1  |     at startDevServer (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
webpack_1  |     at processOptions (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3)
webpack_1  |     at findPort.then (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9)
webpack_1  |     at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:52:5)
webpack_1  |     at Function.Module.runMain (internal/modules/cjs/loader.js:880:11)
webpack_1  |     at internal/main/run_main_module.js:21:11
webpack_1  | npm ERR! code ELIFECYCLE
webpack_1  | npm ERR! errno 1
webpack_1  | npm ERR! example-project@1.1.3 debug: `webpack-dev-server --config webpack.dev.js --trace-deprecation`
webpack_1  | npm ERR! Exit status 1
webpack_1  | npm ERR!
webpack_1  | npm ERR! Failed at the example-project@1.1.3 debug script.
webpack_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
webpack_1  |
webpack_1  | npm ERR! A complete log of this run can be found in:
webpack_1  | npm ERR!     /root/.npm/_logs/2020-10-12T05_14_22_391Z-debug.log
fwt_webpack_1 exited with code 1

  14. chenxsan commented on Oct 12, 2020

    @chenxsan
    chenxsan
    on Oct 12, 2020
    Contributor

    Using that @chenxsan I get:

    webpack_1  | > webpack-dev-server --config webpack.dev.js --trace-deprecation
webpack_1  |
webpack_1  | Error: Cannot find module '../../client/'
webpack_1  |     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
webpack_1  |     at Function.resolve (internal/modules/cjs/helpers.js:19:19)
webpack_1  |     at addEntries (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/addEntries.js:39:36)
webpack_1  |     at updateCompiler (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/updateCompiler.js:48:5)
webpack_1  |     at new Server (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/Server.js:72:5)
webpack_1  |     at startDevServer (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:106:14)
webpack_1  |     at processOptions (/var/www/project/buildchain/node_modules/webpack-dev-server/bin/webpack-dev-server.js:166:3)
webpack_1  |     at findPort.then (/var/www/project/buildchain/node_modules/webpack-dev-server/lib/utils/processOptions.js:33:9)
webpack_1  |     at process.runNextTicks [as _tickCallback] (internal/process/task_queues.js:52:5)
webpack_1  |     at Function.Module.runMain (internal/modules/cjs/loader.js:880:11)
webpack_1  |     at internal/main/run_main_module.js:21:11
webpack_1  | npm ERR! code ELIFECYCLE
webpack_1  | npm ERR! errno 1
webpack_1  | npm ERR! example-project@1.1.3 debug: `webpack-dev-server --config webpack.dev.js --trace-deprecation`
webpack_1  | npm ERR! Exit status 1
webpack_1  | npm ERR!
webpack_1  | npm ERR! Failed at the example-project@1.1.3 debug script.
webpack_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
webpack_1  |
webpack_1  | npm ERR! A complete log of this run can be found in:
webpack_1  | npm ERR!     /root/.npm/_logs/2020-10-12T05_14_22_391Z-debug.log
fwt_webpack_1 exited with code 1

    Sorry, have no idea what's going on here. Maybe you can remove the resolution and try to edit node_modules/webpack-dev-server/lib/utils/addEntries directly? Just add a browserslist in the webTarget array. I've tested on my computer with the example code @wojtekmaj provides, it seems to be working fine with both webpack 5.0.0-rc.3 and webpack 5.

  15. jtanguy
    added a commit that references this issue on Oct 12, 2020

    fix: Force webpack target to web

    ca79d78

  16. 74 remaining items

  17. xavierfoucrier commented on Sep 4, 2021

    @xavierfoucrier
    xavierfoucrier
    on Sep 4, 2021

    @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!

  18. alexander-akait commented on Sep 4, 2021

    @alexander-akait
    alexander-akait
    on Sep 4, 2021
    Member

    @xavierfoucrier yep, I will ping you if will need more information (but I have local version)

  19. dbehmoaras commented on Sep 7, 2021

    @dbehmoaras
    dbehmoaras
    on Sep 7, 2021

    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,
      },
    },
  },
};

  20. alexander-akait commented on Sep 8, 2021

    @alexander-akait
    alexander-akait
    on Sep 8, 2021
    Member

    @dbehmoaras Please provide reproducible test repo

  21. dbehmoaras commented on Sep 8, 2021

    @dbehmoaras
    dbehmoaras
    on Sep 8, 2021

    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.

  22. alexander-akait commented on Sep 8, 2021

    @alexander-akait
    alexander-akait
    on Sep 8, 2021
    Member

    [webpack-dev-server] "hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.

    remove:

    new webpack.HotModuleReplacementPlugin({
      template: "./index.html",
    }),

    It is automatically enable when hot: true (default).

    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 build/index.html - <div id="root"></div>

  23. dbehmoaras commented on Sep 8, 2021

    @dbehmoaras
    dbehmoaras
    on Sep 8, 2021

    @alexander-akait thank you very much. I will try this right away and let you know if it helps.

  24. dbehmoaras commented on Sep 8, 2021

    @dbehmoaras
    dbehmoaras
    on Sep 8, 2021

    @alexander-akait worked like a charm! Thank you very much for your help! I am very grateful

  25. dbehmoaras commented on Sep 8, 2021

    @dbehmoaras
    dbehmoaras
    on Sep 8, 2021

    @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?

  26. alexander-akait commented on Sep 8, 2021

    @alexander-akait
    alexander-akait
    on Sep 8, 2021
    Member

    If your requests are overlapping, i.e. you have /public/image.png for main server and /public/image.png for dev server, hard to say what is the better for you, I think you need handle only html based requests

  27. dbehmoaras commented on Sep 8, 2021

    @dbehmoaras
    dbehmoaras
    on Sep 8, 2021

    ok that makes sense, thanks!

  28. Jingotto commented on Nov 12, 2021

    @Jingotto
    Jingotto
    on Nov 12, 2021

    I also had a problem with the DevServer, the pages were not refreshed. I added this code and it helped me.

    static: {
    directory: path.join(__dirname, 'src'),
    watch: true,
    },

    P.S. Maybe I didn’t understand the problem, sorry, i’m a noob. But if someone faced the same problem it helps.

  29. vaibhav023 commented on Nov 17, 2021

    @vaibhav023
    vaibhav023
    on Nov 17, 2021

    Feel free to ping me

  30. CHENJIAMIAN commented on Apr 20, 2022

    @CHENJIAMIAN
    CHENJIAMIAN
    on Apr 20, 2022

    use cnpm install , resolve.symlinks: false, make it happen.
    You can see this troubleshooting.html#symbolic-links-in-node-modules

  31. amrfhn commented on Aug 4, 2022

    @amrfhn
    amrfhn
    on Aug 4, 2022

    Hello, i come from 2022, is there any updates regarding the live reloading issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions