webpack "watchOptions" are not being honored

[erik-viking]

Version

3.0.5

Node and OS info

Node 8.12.0 / yarn 1.10.1 / Ubuntu 18.04.1

Steps to reproduce

1. Configure package.json with new command: "watch": "vue-cli-service build --no-clean --watch"
2. Create vue.config.js file and setup the following:

module.exports = {
    css: {
        sourceMap: process.env.NODE_ENV !== 'production',
    },
    configureWebpack: config => {
        config.watchOptions = {
            aggregateTimeout: 500,
            ignored: ['node_modules'],
        };
    }
};

3. Run yarn watch
4. Make a change to any file under node_modules

What is expected?

The watch should not try to build again because files under node_modules should be ignored

What is actually happening?

Another build is running after changing a file under node_modules

[LinusBorg]

Your included option should be:

included: /node_modules/
// or 
included: [/node_modules/]

I'm aware that there's an example in the webpack docs looking like this:

watchOptions: {
  ignored: ['files/**/*.js', 'node_modules']
}

But that seems to be wrong. It would have to be 'node_modules/**' I think, or a RegExp like I showed

[ndr47]

I used the one recommended but I still get the error

Error: ENOSPC: System limit for number of file watchers reached

trying to watch a lot of files inside node_modules.

This is my vue.config.js

module.exports = {
	css: {
		requireModuleExtension: false,
		loaderOptions: {
			sass: {
				prependData: '@import "@/css/_variables.sass"'
			}
		}
	},
	configureWebpack: {
		watchOptions: {
			// ignored: ['node_modules/**']
			ignored: /node_modules/
		},
		module: {
			rules: [
				{
					test: /\.html$/,
					loader: 'vue-template-loader',
					exclude: /index.html/
				},
				{
					test: /\.pug$/,
					oneOf: [
						// this applies to `<template lang="pug">` in Vue components
						{
							resourceQuery: /^\?vue/,
							use: ['pug-plain-loader']
						},
						// this applies to pug imports inside JavaScript
						{
							use: ['raw-loader', 'pug-plain-loader']
						}
					]
				}
			]
		}
	}
};

[ndr47]

nobody else has the same problem?

[pmachaux]

I solved this issue like this:

    devServer: {
      watchOptions: {
        ignored: /node_modules/,
      },
    },

So your full vue.config.js could look like this:

module.exports = {
	configureWebpack: {
		devServer: {
		  watchOptions: {
			ignored: /node_modules/,
		  },
		}
	}
}

I hope this helps!

[shepelevstas]

@pmachaux Thank you! It worked!

Shouldn't it be default?

[pmachaux]

@shepelevstas glad it helped!
It seems that according to webpack documentation (https://webpack.js.org/configuration/watch/) only the watch is the default with dev server.
My assumption is that in the use case where you add a library, you can use it directly in your source code as the watch on node_modules will pick it up. If you don't watch node_modules, you have to kill the dev server and restart the command to load the new library.

[shepelevstas]

@pmachaux In case of something like npm install... - shouldn't a change in package.json (which is outside of /node_modules) be enough to trigger rebuild?

For some reason configureWebpack.devServer.watchOptions.ignored = /node_modules/ in vue.config.js does not work again if I do vue-cli-service build --mode development --no-clean --watch :-0 Maybe this vue.config.js option is working only for ... serve command?

Webpack and alike are cool and all, but often I wish for more tools like elm ;-)