升级Next.js 10.x后运行yarn dev报错 找不到webpack/lib/node/NodeTemplatePlugin模块

这个报错完全来自依赖版本不兼容：你现在使用的@zeit/next-css、@zeit/next-sass是早已经停止维护的废弃包，其内部绑定的旧版mini-css-extract-plugin，和Next.js 10.x版本内置的自定义打包Webpack模块结构不匹配，才会触发找不到webpack/lib/node/NodeTemplatePlugin的加载错误。
你之前手动安装独立版本Webpack的操作反而会制造新的版本冲突，这也是你后来遇到tap相关报错的原因——Next.js根本不允许外部Webpack版本和内置打包逻辑混用。

1. 清理废弃依赖
   先从项目依赖里卸载两个已经淘汰的旧包：@zeit/next-css、@zeit/next-sass，再安装Next.js原生支持Sass所需的官方编译依赖，执行安装命令：
   yarn add sass
2. 重写next.config.js配置
   Next.js从9.2版本开始就已经原生支持CSS、Sass文件的加载，完全不需要第三方的CSS/Sass适配插件。把原来的插件嵌套逻辑全部删掉，只保留你自定义的静态资源loader规则即可，正确配置示例如下：

   const nextConfig = {
       webpack(config, options) {
           config.module.rules.push({
               test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
               use: {
                   loader: 'url-loader',
                   options: {
                       limit: 100000
                   }
               }
           });
           return config;
       }
   }
   module.exports = nextConfig
   

3. 清除所有残留缓存
   依次删除项目根目录下的：
   • .next 文件夹（旧的构建缓存）
   • node_modules 文件夹
   • 对应的包管理器锁文件（yarn.lock/package-lock.json）
     重新执行yarn install安装干净的依赖版本
4. 重启项目验证
   执行yarn dev启动开发服务。除了最初的模块找不到错误会消失外，提示Could not find files for /[lang] in .next/build-manifest.json的报错也会同步消失——这个提示本质是Sass文件编译失败导致构建流程中断、构建产物不完整引发的连锁问题，不属于独立的路由配置错误。

注意：之前流传的手动安装全局Webpack的方案，只适用于自己维护Webpack配置的老前端项目，和Next.js内置打包机制的项目完全不通用，不要照搬操作。

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