Next.js 11.1.0 无法监听node_modules目录代码变更如何解决？

问题根源 #

Next.js 11.x 版本新增了独立于 webpack 的全局文件监听过滤逻辑，你修改的 config.watchOptions.ignored 仅作用于 webpack 编译层，上游的 Next.js 自带监听服务已经把所有 node_modules 路径的变更事件提前拦截，不会传递到 webpack 处理，所以单独修改 webpack 配置不会生效。

可用解决方法 #

方法1：双端监听规则配置（适配 11.1.0 版本） #

在 next.config.js 中同时修改 Next.js 全局监听和 webpack 层的监听规则，建议仅放开你需要监听的单个/多个依赖包的限制，不要全量放开整个 node_modules 目录，避免CPU占用过高：

module.exports = {
  // 1. 放开Next.js全局监听对目标依赖包的拦截
  onDemandEntries: {
    // 示例：仅放开对@my-org/ui-components包的监听，其余node_modules仍忽略
    ignored: /node_modules\/(?!@my-org\/ui-components)/,
  },
  webpack(config) {
    // 2. 修改webpack层的监听忽略规则
    config.watchOptions.ignored = config.watchOptions.ignored.filter(
      ignore => {
        const ignoreStr = ignore.toString()
        // 保留除了node_modules通用忽略之外的其他规则
        return !ignoreStr.includes('node_modules')
      },
    )
    // 3. 如果你监听的是npm link/pnpm workspace软链接的本地依赖，必须加这行配置
    config.resolve.symlinks = false
    return config
  },
  // 4. 开启外部目录支持，适配软链接依赖的监听
  experimental: {
    externalDir: true,
  }
}

方法2：临时调试替代方案 #

如果只是短期调试依赖包的代码，可以直接把对应依赖包的源码复制到项目根目录的lib文件夹下引用，调试完成后再同步回原依赖包，不需要修改任何配置，编译速度也远高于监听node_modules。

方法3：版本升级 #

如果可以接受框架版本升级，Next.js 12.1 及以上版本新增了官方transpilePackages配置，直接在配置中声明需要监听的依赖包名即可自动放开对应的监听限制，不需要手动修改监听规则，兼容性和稳定性更好。

内容的提问来源于stack exchange，提问作者Alan Svits