webpack-dev-server: HMR not working properly when modifying files in node_modules folder

OS: Tried on MacOS, Windows 10, CentOS & Debian10 webpack version: 5.37.1 webpack-dev-server: 4.0.0-beta.3

This is a bug
This is a modification request

When I edit my files in the src directory, the live reload happens with the latest modifications.

However when editing my dependency files (in node_modules) for dev purposes, the console warned me that the webpack-dev-server hot reloads but my components don’t re-render and all my changes are not taken into account (even if I refresh the whole page). I also tried with npm link or yarn link, but issue was the same.

With webpack 4, I never encountered this issue. I was able to change any file in the node_modules folder and had hot reload working (without any specific configuration).

Code

I’ve tried to add this config to the devServer options:

devServer: {
    https: false,
    port: 8080,
    open: false,
    watchOptions: {
      ignored: [
        'node_modules',
        '!node_modules/my-module',
      ],
    },
  },

and even this one, without success:

devServer: {
    https: false,
    port: 8080,
    open: false,
    watchFiles: 'node_modules/*',
  },

This is what’s displayed in the console when editing a file in a node_modules package (hot reload not working):

121386308-2de9ec00-c94a-11eb-9f54-5b78c5157883

When editing an src file (hot reload working):

121387733-33940180-c94b-11eb-9084-c910c5e8086a

I thought the issue was related to Quasar, and opened a ticket but it doesn’t seem to be the case. One of the creators suggested me to open a ticket here. (Link to the Quasar issue: https://github.com/quasarframework/quasar/issues/9626)

I checked on your GitHub closed issues and found some similar issues but unfortunately none of the answers did the trick for me.

Expected Behavior

When writing a console.log or an alert code in a node_modulesfile, changes are detected and the screen is automatically updated.

Actual Behavior

A change is detected and a new build is made, but the console says “[webpack-dev-server] App hot update…” Also, the screen is not updated. After ending the process, you must restart it for the changes to take effect.

For Bugs; How can we reproduce the behavior?

Link to the reproducing repo: https://github.com/julien-terral/webpack-5-hmr-issue

Video:

https://user-images.githubusercontent.com/27774317/122480157-9b41f080-cfcc-11eb-93ac-f231475958ed.mov

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (11 by maintainers)

Most upvoted comments

oh, sorry for delay, yes, pnp has problem here, but based on different result on different os, it can be bug in pnp code, do you use the latest version?

alexander-akait on Mar 15, 2022

Try to set it on [] https://github.com/webpack/webpack/blob/main/lib/config/defaults.js#L416, i.e. immutablePaths

alexander-akait on Mar 11, 2022

Thank you so much for your time @alexander-akait, it will help me a lot, I was looking for a workaround for days! 🙏

juterral on Jun 17, 2021

@julien-terral found:

chainWebpack (chain) {
  chain.plugin('eslint-webpack-plugin')
    .use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])

  chain.merge({
    snapshot: {
      managedPaths: []
    }
  })
},

on 68 line

alexander-akait on Jun 17, 2021