How to watch certain node_modules changes with webpack-dev-server
Granted this question is not regarding Next.js or any specific framework, I'd like to post an answer related to Next.js here since I arrived here from Google as others might also.
Here is what worked for me in my next.config.js:
module.exports = {
// ...
webpackDevMiddleware: config => {
// Don't ignore all node modules.
config.watchOptions.ignored = config.watchOptions.ignored.filter(
ignore => !ignore.toString().includes('node_modules')
);
// Ignore all node modules except those here.
config.watchOptions.ignored = [
...config.watchOptions.ignored,
/node_modules\/(?!@orgname\/.+)/,
/\@orgname\/.+\/node_modules/
];
return config;
},
// ...
}
This targets a specific organization of packages. If you need to just target a specific package:
module.exports = {
// ...
webpackDevMiddleware: config => {
// Don't ignore all node modules.
config.watchOptions.ignored = config.watchOptions.ignored.filter(
ignore => !ignore.toString().includes('node_modules')
);
// Ignore all node modules except those here.
config.watchOptions.ignored = [
...config.watchOptions.ignored,
/node_modules([\\]+|\/)+(?!my-node-module)/,
/\my-node-module([\\]+|\/)node_modules/
];
return config;
},
// ...
}
This builds on Elhay's answer.
You can config in in webpack.config file or in WebpackDevServer option, to watch for changes also in node_modules (i think that by default webpack watching for changes in all files)
https://webpack.js.org/configuration/watch/#watchoptions-ignored
in the following example webpack ignored all changes in node_modules folder except specific module.
watchOptions: {
ignored: [
/node_modules([\\]+|\/)+(?!some_npm_module_name)/,
/\some_npm_module_name([\\]+|\/)node_modules/
]
}
ignored[0]
= Regex to ignore all node_modules that not started with some_npm_module_name
ignored[1]
= Regex to ignore all node_modules inside some_npm_module_name
You may also used this link npm linked modules don’t find their dependencies