webpack: Webpack 5 watch mode does not trigger compilation when node_modules file changes

Bug report

What is the current behavior?

Webpack 5 RC 4 in watch mode does not respond to a change in a file in node_modules. Webpack 4 does.

If the current behavior is a bug, please provide the steps to reproduce.

cd /tmp
mkdir webpack5-nm-check
cd webpack5-nm-check
npm init -y
npm install webpack@~5.0.0-rc.4 webpack-cli isarray
mkdir src
echo "require('isarray')"  > src/index.js
./node_modules/.bin/webpack --mode development --watch

In a separate terminal, run:

cd /tmp/webpack5-nm-check
echo "console.log('hello');" > ./node_modules/isarray/index.js

Note that the webpack compilation is not triggered on this change.

To show this works in webpack 4:

cd /tmp
mkdir webpack4-nm-check
cd webpack4-nm-check
npm init -y
npm install webpack webpack-cli isarray
mkdir src
echo "require('isarray')"  > src/index.js
./node_modules/.bin/webpack --mode development --watch

and

cd /tmp/webpack4-nm-check
echo "console.log('hello');" > ./node_modules/isarray/index.js

Note that the webpack 4 build re-compiles.

What is the expected behavior?

Webpack 5 should recompile when an imported module in node_modules changes. This can happen, for example, in a monorepo where the node_modules module actually links to the source of another package.

Other relevant information: webpack version: 5.0.0-rc.4 Node.js version: 14.13.0 Operating System: macOS 10.14.6 Additional tools:

Referencing https://github.com/webpack/webpack/issues/11406 as requested there.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 18 (13 by maintainers)

Commits related to this issue

fix: hmr not working, see https://github.com/webpack/webpack/issues/11612#issuecomment-832107036 — committed to vuejs/devtools by Akryum 3 years ago
fix: hmr not working, see https://github.com/webpack/webpack/issues/11612#issuecomment-832107036 — committed to etherdog-eth/vue-devtools by etherdog-eth 3 years ago
build: make the watch rebuild faster again * follow the suggestion from https://github.com/webpack/webpack/issues/11612 — committed to ntarocco/invenio-assets by max-moser a year ago

Most upvoted comments

We use symlinks: false because we want the dependencies of the symlinked modules to be resolved from the parent module. With the above suggestions, overriding managedPaths to NOT ignore node_modules for hashing did not work for us alone. What worked though was adding watchOptions: { followSymlinks: true }

Somehow it seems that with symlinks: false, by default the changes in the symlinked files are not watched anymore by the dev server ( I don’t remember this happening in webpack 4, everything worked fine out of the box)

Anyway, this is the final config that works for us:

snapshot: {
    managedPaths: [],
},
    // when symlinks.resolve is false, we need this to make sure dev server picks up the changes in the symlinked files and rebuilds
watchOptions: {
    followSymlinks: true,
},
resolve: {
    // Uncomment the following line when working with local packages
    // More reading : https://webpack.js.org/configuration/resolve/#resolvesymlinks
    symlinks: false,
},

+17

gaurav5430 on Feb 28, 2023

By default, webpack assumes that the node_modules directory, which webpack is inside of, is only modified by a package manager. Hashing and timestamping is skipped for node_modules. Instead, only the package name and version is used for performance reasons. Symlinks (i. e. npm/yarn link) are fine. Do not edit files in node_modules directly unless you opt-out of this optimization with snapshot.managedPaths: []. When using Yarn PnP webpack assumes that the yarn cache is immutable (which it usually is). You can opt-out of this optimization with snapshot.immutablePaths: []

This can happen, for example, in a monorepo where the node_modules module actually links to the source of another package.

In this case this should work as expected.

+10

sokra on Oct 8, 2020

Here is a reproduction: https://github.com/Akryum/webpack-issue-11612

Run yarn
Go to packages/front
Run yarn dev
Open the browser console to see the message
Change the packages/components/src/Components.js file

Expected: hot reload

Actual:

It seems that using symlink: false causes this.

Akryum on May 5, 2021

A recommendation to avoid using it

alexander-akait on Oct 8, 2020

Thanks for the explanation and nuanced answer. I confirmed that snapshot.managedPaths: [] does indeed solve the problem in the reproduction above. Closing as answered.

jasongrout on Oct 8, 2020

Usually I have problems with them with (for example PostCSS config not found errors)

Akryum on May 5, 2021