React项目迁移Next.js后出现Module not found: Can't resolve 'fs'错误

你的报错核心原因是Next.js 10.x 版本的webpack5配置写法错误，导致你新增的fs fallback规则没有生效，按照以下步骤修改即可：

步骤1：修正webpack配置（二选一即可） #

方案A：使用webpack4（更适配你当前的Next 10.0.9版本，稳定性更高） #

直接修改你的next.config.js：

• 删掉根配置下的webpack5: true
• 把webpack配置段中的config.resolve.fallback = { fs: false };替换为webpack4对应的配置：config.node = { fs: 'empty' };

修改后的webpack配置片段参考：

webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    use: [
      {
        loader: "@svgr/webpack",
        options: {
          titleProp: true,
          svgoConfig: {
            plugins: {
              removeViewBox: false
            }
          }
        }
      }
    ]
  });
  // webpack4 配置写法
  config.node = { fs: 'empty' };

  return config;
}

方案B：正确开启webpack5 #

如果你需要使用webpack5，Next.js 10.x版本必须把webpack5开关放在future配置项中，根配置下的webpack5: true不会生效：

// next.config.js 根配置中新增future字段
future: {
  webpack5: true
},
webpack(config) {
  // 保留你原来的fallback配置
  config.resolve.fallback = { fs: false };
  // ... 其余原有配置
  return config;
}

步骤2：排查代码引入逻辑 #

如果修改配置后仍然报错，需要检查是否有服务端专用代码被打包到客户端：

• 所有用到fs模块的逻辑，只能写在getStaticProps、getServerSideProps、API路由这几个服务端运行的场景中，不可以在普通React组件的渲染逻辑、自定义App/Document的客户端逻辑里引入调用fs的模块
• 如果需要动态区分服务端/客户端逻辑，可以用typeof window === 'undefined'的判断来动态引入服务端专用模块，避免被打包到客户端包中

步骤3：排查第三方依赖兼容问题 #

• 检查迁移的代码中是否在客户端引入了fs-extra、gray-matter等依赖Node.js运行环境的第三方包，如果有需要调整引入逻辑
• 若使用的next-optimized-images版本过旧，可以升级到适配Next.js 10的版本，或者替换为Next.js自带的Image组件降低依赖复杂度

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