Cannot watch specific dependencies in node_modules #8619

SystemParadox · 2022-06-16T11:39:09Z

Describe the bug

The documentation for server.watch contains the following example:

server: {
    watch: {
        ignored: ['!**/node_modules/your-package-name/**']
    }
},

This example does not work. It appears that the builtin **/node_modules/** exclude causes chokidar to not even look in node_modules despite the negation in the subdirectory.

It appears this was originally tested (see #5023 and #5239) with ignored: ['!**/node_modules/**']. This does work, but in a real project will almost immediately result in Error: ENOSPC: System limit for number of file watchers reached.

See paulmillr/chokidar#1225. I played with various chokidar options but I couldn't see a way to achieve this.

Reproduction

See chokidar issue.

System Info

System:
    OS: Linux 5.4 Linux Mint 20.3 (Una)
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 4.20 GB / 15.56 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.15.1 - /usr/bin/node
    npm: 8.1.1 - ~/npm/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 101.0
  npmPackages:
    vite: ^2.9.12 => 2.9.12

Used Package Manager

npm

Logs

No response

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

The text was updated successfully, but these errors were encountered:

sapphi-red · 2022-06-16T12:36:37Z

Vite's document seems to be wrong (or there was a behavior change on chokidar side?).
See #7850.

bluwy · 2022-06-17T05:45:06Z

I also wonder if the order matters:

vite/packages/vite/src/node/server/index.ts

Lines 284 to 288 in d402ad3

 ignored: [ 

 '**/node_modules/**', 

 '**/.git/**', 

 ...(Array.isArray(ignored) ? ignored : [ignored]) 

 ],

say if we move the user-specified ones at the top before **/node_modules/** 🤔

SystemParadox · 2022-06-18T22:34:10Z

@bluwy good thought but alas no, swapping the order doesn't help:

ignored: [
    '!**/node_modules/foo/**',
    '**/node_modules/**',
],

Chokidar still seems to ignore the whole of node_modules and doesn't bother looking inside it.

ryzr · 2022-06-30T04:55:26Z

@SystemParadox

If it's any help, creating a custom plugin to override the vite-enforced watch options seems to have worked for me

{
    name: 'watch-node-modules',
    configureServer: (server: ViteDevServer) : void => {
        server.watcher.options = {
            ...server.watcher.options,
            ignored: [
                /node_modules\/(?!my-package-name).*/,
                '**/.git/**',
            ]
        }
    }
}

SystemParadox · 2022-06-30T09:22:02Z

Thanks, that's very helpful as a temporary workaround until chokidar provides an official recommendation of how to fix this properly.

To preempt anyone who tries to close this:

I should not have to add a plugin to include/exclude files, especially since there is an option already for this - it just doesn't work
Negative regex lookaheads are absolutely not acceptable as a long term solution

MadLittleMods · 2022-09-16T18:48:10Z

Similar to #6718, it would be nice to exclude locally linked packages from being ignored by default. When I make a change in a sub-dependency, I want the bundle to rebuild.

Reference: vitejs/vite#8619 (comment)

VanCoding · 2022-12-26T11:11:53Z

I currently can't use vite because of this issue. I have a monorepo, where I build dependencies separately. but vite doesn't detect changes to them and there seems to be no way of making it detect them. The trick with the plugin by @bluwy didn't work for me either.

MadLittleMods · 2023-05-27T00:44:28Z

The workaround above using a custom plugin doesn't work for a plain vite.build({ watch: true }) because the configureServer hook never gets called when you're not using the dev server.

I tried using the options universal hook to replace inputOptions.watch.chokidar.ignored as desired but doesn't seem to have any effect on what is actually watched/ignored.

Custom Vite plugin (doesn't work):

{
  name: 'watch-node-modules',
  options(inputOptions) {
    inputOptions.watch.chokidar.ignored = [
      /node_modules\/(?!hydrogen-view-sdk).*/,
      '**/.git/**',
    ];
    return inputOptions;
  }
}

When using Vite, inputOptions.watch.chokidar.ignored is normally:

[
  '**/.git/**',
  '**/node_modules/**',
  '**/test-results/**',
  '/home/eric/Documents/github/element/matrix-public-archive/node_modules/.vite/**'
]

The current `server.watch` docs aren't accurate and the solution proposed just doesn't work. See vitejs#8619 There is a different workaround in the issue using a custom Vite plugin if you're using the Vite dev server, vitejs#8619 (comment)

patricknelson · 2023-06-06T22:37:45Z

Just packaged up @ryzr's awesome little snippet into something reusable where you can also list multiple modules if you want 🚀

import { ViteDevServer } from 'vite';

export function pluginWatchNodeModules(modules) {
	// Merge module into pipe separated string for RegExp() below.
	let pattern = `/node_modules\\/(?!${modules.join('|')}).*/`;
	return {
		name: 'watch-node-modules',
		configureServer: (server: ViteDevServer) : void => {
			server.watcher.options = {
				...server.watcher.options,
				ignored: [
					new RegExp(pattern),
					'**/.git/**',
				]
			}
		}
	}
}

Then to use it, pass into your plugins array like so:

// Import from the separate file you might store this in, e.g. 'utils'
import { pluginWatchNodeModules } from './utils';

plugins: [
	// ... other plugins...
	pluginWatchNodeModules(['your-plugin', 'another-example']),
],

Edit: p.s. Don't forget to ensure that you exclude these packages from optimizeDeps like so:

optimizeDeps: {
	exclude: [
		'your-plugin',
		'another-example',
	],
},

TheTedAdams · 2023-07-28T04:15:06Z

I don't know if something changed in the last month but @patricknelson snippet did not work for me. Been banging my head against this for hours but finally saw this in docs and so tried this:

import type { PluginOption } from 'vite';

export function watchNodeModules(modules: string[]): PluginOption {
  return {
    name: 'watch-node-modules',
    config() {
      return {
        server: {
          watch: {
            ignored: modules.map((m) => `!**/node_modules/${m}/**`),
          },
        },
      };
    },
  };
}

And it worked! The other "gotcha" I wanted to call out is that if you need to include a dep of your excluded dep, you need to include EXACTLY what is in your import line. For me it was react-icons and I wasted a few hours until I realized I had to include react-icons/fi/index.js because that is what was in the import line in my esm package.

quyle92 · 2023-08-31T05:45:41Z

I don't know if something changed in the last month but @patricknelson snippet did not work for me. Been banging my head against this for hours but finally saw this in docs and so tried this:
import type { PluginOption } from 'vite';

export function watchNodeModules(modules: string[]): PluginOption {
  return {
    name: 'watch-node-modules',
    config() {
      return {
        server: {
          watch: {
            ignored: modules.map((m) => `!**/node_modules/${m}/**`),
          },
        },
      };
    },
  };
}
And it worked! The other "gotcha" I wanted to call out is that if you need to include a dep of your excluded dep, you need to include EXACTLY what is in your import line. For me it was react-icons and I wasted a few hours until I realized I had to include react-icons/fi/index.js because that is what was in the import line in my esm package.

Many thanks. It works, but I need to Ctrl + S my vite.config.js (I am using react in my laravel codebase) to make my app load again to see changes in the excluded package.
Is there any way that make vite automatically reload without manually saving vite.config.js again?

TheTedAdams · 2023-09-06T05:40:07Z

@quyle92 you may be running into cache stuff. Are you also listing your package in optimizeDeps.exclude? This is the final version of plugin I've been using:

import type { PluginOption } from 'vite';

export function watchNodeModules(modules: string[]): PluginOption {
  return {
    name: 'watch-node-modules',
    config() {
      return {
        server: {
          watch: {
            ignored: modules.map((m) => `!**/node_modules/${m}/**`),
          },
        },
        optimizeDeps: {
          exclude: modules,
        },
      };
    },
  };
}

quyle92 · 2023-09-06T08:44:05Z

Hi @TheTedAdams ,
Thanks for your reply.
If I add optimizeDeps: { exclude: modules, }, vite failed to build my app and throw error at node_modules/uncontrollable/lib/esm/utils.js with message being Uncaught SyntaxError: ambiguous indirect export: default.

jfirebaugh · 2023-10-20T20:15:01Z

The issue with using optimizeDeps.exclude for this is that this also excludes deps of that package from vite's esm/cjs interop magic. So you then have to run through and include a bunch of your deps-of-deps in optimizeDeps.include to re-opt them in to esm/cjs interop. (@quyle92 that's probably the issue you're running into.)

domoritz · 2023-11-26T17:58:50Z

I added the plugin in #8619 (comment) and vite updates my linked package when I save the vite config but it still doesn't update when I change the source code. I have resolve.preserveSymlinks: true enabled. Any suggestions for how I can watch a linked package?

TY-LIU · 2023-12-07T10:39:30Z

English is not my native language, and there may be grammar errors in the following content. Please understand.

I tried this method, but not work.(antfu/vite-plugin-restart#10)
This is my method.
Create a new .env file for the root path.

# .env
VITE_CHANGE_KEY=anything

and use node to change this file

// generateId.js
import { readFile, writeFile } from 'fs';

readFile('./.env', 'utf-8', (err, contents) => {
  if (err) {
    console.error(err);
    process.exit(1);
    return;
  }
  contents = `VITE_CHANGE_KEY=${Math.random()}`;
  writeFile('./.env', contents, 'utf-8', (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log(contents);
    }
  });
});

Because Vite will observe changes in the. env file and then re-run.
(https://vitejs.dev/guide/dep-pre-bundling.html#caching)

So, when your specific dependencies have changed, you can run node generateId.js.
As for how to know if the dependency has changed, you can use nodemon

// nodemon.json
{
    "exec": "npm run *** && npm run generate-id", // generate-id just scripts command => 'node generateId.js'
}

It's stupid, but it works.

AttackXiaoJinJin · 2023-12-30T04:56:19Z

@quyle92 you can read package's dependencies and put them to vite optimizeDeps. include：

// vite.config.js

import path from 'path'
import {readFileSync} from 'fs'

export function watchNodeModules(modules) {
  return {
    name: 'watch-node-modules',
    config() {
      return {
        server: {
          watch: {
            ignored: modules.map((m) => `!**/node_modules/${m}/**`),
          },
        },
        optimizeDeps: {
          exclude: modules,
          include:modules.reduce((totalIncludes,m)=>{
            const url=path.join(process.cwd(), `node_modules/${m}/package.json`)
            const source = readFileSync(url, 'utf-8');
            const pkg = JSON.parse(source);
            const dependencies=pkg.dependencies
            // https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude
            const include=Object.keys(dependencies).reduce((includes,d)=>{
              // remove types package
              if(d.includes('@types')){
                return includes
              }
              includes.push(`${m} > ${d}`)
              return includes
            },[])
            totalIncludes=[...new Set([...totalIncludes,...include])]
            return totalIncludes
          },[]),
        },
      };
    },
  };
}

sabarnix · 2024-01-19T14:18:38Z

@quyle92 you can read package's dependencies and put them to vite optimizeDeps. include：

// vite.config.js

import path from 'path'
import {readFileSync} from 'fs'

export function watchNodeModules(modules) {
  return {
    name: 'watch-node-modules',
    config() {
      return {
        server: {
          watch: {
            ignored: modules.map((m) => `!**/node_modules/${m}/**`),
          },
        },
        optimizeDeps: {
          exclude: modules,
          include:modules.reduce((totalIncludes,m)=>{
            const url=path.join(process.cwd(), `node_modules/${m}/package.json`)
            const source = readFileSync(url, 'utf-8');
            const pkg = JSON.parse(source);
            const dependencies=pkg.dependencies
            // https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude
            const include=Object.keys(dependencies).reduce((includes,d)=>{
              // remove types package
              if(d.includes('@types')){
                return includes
              }
              includes.push(`${m} > ${d}`)
              return includes
            },[])
            totalIncludes=[...new Set([...totalIncludes,...include])]
            return totalIncludes
          },[]),
        },
      };
    },
  };
}

This throws error
does not provide an export named 'default'

molaux · 2024-02-03T15:56:01Z

Just packaged up @ryzr's awesome little snippet into something reusable where you can also list multiple modules if you want 🚀

import { ViteDevServer } from 'vite';

export function pluginWatchNodeModules(modules) {
	// Merge module into pipe separated string for RegExp() below.
	let pattern = `/node_modules\\/(?!${modules.join('|')}).*/`;
	return {
		name: 'watch-node-modules',
		configureServer: (server: ViteDevServer) : void => {
			server.watcher.options = {
				...server.watcher.options,
				ignored: [
					new RegExp(pattern),
					'**/.git/**',
				]
			}
		}
	}
}

Then to use it, pass into your plugins array like so:

// Import from the separate file you might store this in, e.g. 'utils'
import { pluginWatchNodeModules } from './utils';

plugins: [
	// ... other plugins...
	pluginWatchNodeModules(['your-plugin', 'another-example']),
],

Edit: p.s. Don't forget to ensure that you exclude these packages from optimizeDeps like so:

optimizeDeps: {
	exclude: [
		'your-plugin',
		'another-example',
	],
},

Was unable to get it working until I added server.watcher._userIgnored = undefined picked from chokidar source (when configureServer is called, server.watcher is already instanciated).

export function pluginWatchNodeModules (modules) {
  return {
    name: 'watch-node-modules',
    configureServer: (server) => {
      const regexp = `/node_modules\\/(?!${modules.join('|')}).*/`
        server.watcher.options = {
          ...server.watcher.options,
          ignored: [
            '**/.git/**',
            '**/test-results/**',
            new RegExp(regexp)
          ]
        }
        server.watcher._userIgnored = undefined
    },
    config () {
      return {
        optimizeDeps: {
          exclude: modules
       }
      }
    }
  }
}

Kolobok12309 · 2024-03-20T13:41:04Z

Mb anyone worked with nuxt 3
Fix of @AttackXiaoJinJin work with small changes, but SSR updated only one time, to fix this we add to nuxt.config.ts

{
...
  nitro: {
    devServer: {
      watch: [...absoluteResolvedPackagePaths]
    }
  }
...
}

acupofspirt · 2024-03-26T09:48:01Z

Did work for me:

function watchPackages(packageNames) {
  let isWatching = false;

  return {
    name: 'vite-plugin-watch-packages',

    buildStart() {
      if (!isWatching) {
        packageNames.forEach((packageName) => {
          const absPackagePath = path.resolve('node_modules', packageName);
          const realPackagePath = fs.realpathSync(absPackagePath);

          this.addWatchFile(realPackagePath);
        });

        isWatching = true;
      }
    },
  };
}

// in vite.config.js
{
  plugins: [watchPackages(['dayjs', 'foo/bar', '@some-scoped-package/utils'])]
}

But it works only for build --watch mode. Linked packages (npm link/npm i <../../your/fs/path>) will work too.

domoritz · 2024-03-26T20:36:30Z

Thanks for sharing @acupofspirt! This still doesn't seem to work for me in https://github.com/vega/editor if I link https://github.com/vega/vega-lite. I run yarn watch in Vega-Lite and make a change in the code but the editor does not refresh. Any idea what might be wrong?

acupofspirt · 2024-03-27T00:33:23Z

@domoritz It will work only for build --watch. I've updated my comment. Sorry for the confusion 😔

domoritz · 2024-03-27T01:09:39Z

Ah bummer, I really need it with vite serve.

HugoMcPhee · 2024-05-03T15:21:44Z

If it helps, it works with npx vite without any custom scripts when re-saving the vite config file while force is true

in the config:
optimizeDeps: { force: true },
or if the command is started with: --force

yzy415 · 2024-05-08T14:41:41Z

#6718

Hi @acupofspirt,

I tried using this plugin. It's great and worked well for the files inside the src or the root but not in the module graph.

But it did not work for the files inside the node_modules.

I did use the build --watch mode. I also tried to print the path the files it added, and the path to the files were valid.

May I know your vite version?

Thanks!

yzy415 · 2024-05-08T15:24:16Z

#6718

Hi @acupofspirt,

I tried using this plugin. It's great and worked well for the files inside the src or the root but not in the module graph.

But it did not work for the files inside the node_modules.

I did use the build --watch mode. I also tried to print the path the files it added, and the path to the files were valid.

May I know your vite version?

Thanks!

Any file of other projects inside the node_modules can't be watched expectedly either. It's weird.

SystemParadox added the pending triage label Jun 16, 2022

bluwy added bug p2-edge-case Bug, but has workaround or limited in scope (priority) and removed pending triage labels Jul 1, 2022

nvh95 added a commit to nvh95/vitest-preview that referenced this issue Oct 22, 2022

fix: workaround to watch .vitest-preview under node_modules

5b3e19b

Reference: vitejs/vite#8619 (comment)

nvh95 mentioned this issue Oct 23, 2022

Improve build nvh95/vitest-preview#6

Merged

2 tasks

sapphi-red mentioned this issue Mar 27, 2023

server.watch.ignored settings is not working #12607

Closed

7 tasks

MadLittleMods mentioned this issue May 27, 2023

docs: update working solutions to watch a package inside node_modules/ #13353

Closed

9 tasks

tcompa mentioned this issue Sep 21, 2023

Minor issue when using npm run dev and installing tasks in a subfolder fractal-analytics-platform/fractal-web#290

Closed

bluwy mentioned this issue Sep 25, 2023

docs: update server.watch info #14469

Merged

4 tasks

domoritz mentioned this issue Nov 26, 2023

Make sure the Vega editor with Vite works with linked Vega and Vega-Lite packages vega/editor#1346

Open

AttackXiaoJinJin mentioned this issue Jan 4, 2024

[Docs] using the file: protocol can not reflect the changes until Run pnpm install everytime pnpm/pnpm#7465

Closed

4 tasks

Otto-J mentioned this issue Jan 26, 2024

根据vite官网修改配置热更新不生效 dcloudio/uni-app#3811

Closed

patak-dev removed the bug label Feb 10, 2024

prashanDYDX mentioned this issue Mar 20, 2024

build: Trigger Vite restart when install-local-abacus is run dydxprotocol/v4-web#390

Merged

sodic mentioned this issue Apr 3, 2024

Dig deeper into Vite's HMR problems wasp-lang/wasp#1934

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot watch specific dependencies in node_modules #8619

Cannot watch specific dependencies in node_modules #8619

SystemParadox commented Jun 16, 2022

sapphi-red commented Jun 16, 2022

bluwy commented Jun 17, 2022

SystemParadox commented Jun 18, 2022

ryzr commented Jun 30, 2022 •

edited

SystemParadox commented Jun 30, 2022

MadLittleMods commented Sep 16, 2022 •

edited

VanCoding commented Dec 26, 2022

MadLittleMods commented May 27, 2023 •

edited

patricknelson commented Jun 6, 2023 •

edited

TheTedAdams commented Jul 28, 2023

quyle92 commented Aug 31, 2023

TheTedAdams commented Sep 6, 2023

quyle92 commented Sep 6, 2023

jfirebaugh commented Oct 20, 2023

domoritz commented Nov 26, 2023

TY-LIU commented Dec 7, 2023 •

edited

AttackXiaoJinJin commented Dec 30, 2023

sabarnix commented Jan 19, 2024

molaux commented Feb 3, 2024

Kolobok12309 commented Mar 20, 2024 •

edited

acupofspirt commented Mar 26, 2024 •

edited

domoritz commented Mar 26, 2024

acupofspirt commented Mar 27, 2024

domoritz commented Mar 27, 2024

HugoMcPhee commented May 3, 2024

yzy415 commented May 8, 2024 •

edited

yzy415 commented May 8, 2024

Cannot watch specific dependencies in node_modules #8619

Cannot watch specific dependencies in node_modules #8619

Comments

SystemParadox commented Jun 16, 2022

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

sapphi-red commented Jun 16, 2022

bluwy commented Jun 17, 2022

SystemParadox commented Jun 18, 2022

ryzr commented Jun 30, 2022 • edited

SystemParadox commented Jun 30, 2022

MadLittleMods commented Sep 16, 2022 • edited

VanCoding commented Dec 26, 2022

MadLittleMods commented May 27, 2023 • edited

patricknelson commented Jun 6, 2023 • edited

TheTedAdams commented Jul 28, 2023

quyle92 commented Aug 31, 2023

TheTedAdams commented Sep 6, 2023

quyle92 commented Sep 6, 2023

jfirebaugh commented Oct 20, 2023

domoritz commented Nov 26, 2023

TY-LIU commented Dec 7, 2023 • edited

AttackXiaoJinJin commented Dec 30, 2023

sabarnix commented Jan 19, 2024

molaux commented Feb 3, 2024

Kolobok12309 commented Mar 20, 2024 • edited

acupofspirt commented Mar 26, 2024 • edited

domoritz commented Mar 26, 2024

acupofspirt commented Mar 27, 2024

domoritz commented Mar 27, 2024

HugoMcPhee commented May 3, 2024

yzy415 commented May 8, 2024 • edited

yzy415 commented May 8, 2024

ryzr commented Jun 30, 2022 •

edited

MadLittleMods commented Sep 16, 2022 •

edited

MadLittleMods commented May 27, 2023 •

edited

patricknelson commented Jun 6, 2023 •

edited

TY-LIU commented Dec 7, 2023 •

edited

Kolobok12309 commented Mar 20, 2024 •

edited

acupofspirt commented Mar 26, 2024 •

edited

yzy415 commented May 8, 2024 •

edited