新增React组件致NextJS环境报错：无法解析'fs'模块

嘿，这个问题我太熟悉了！之前在Next.js项目里引入文件上传相关代码时也踩过一模一样的坑，给你梳理下排查方向和解决办法：

这个Module not found: Can't resolve 'fs'错误来自busboy——这是一个Node.js环境下处理文件上传的库，它依赖Node核心模块fs，但Next.js在客户端渲染时是不支持Node核心模块的。你的新组件肯定是间接引入了依赖busboy的代码，而且错误地在客户端代码路径里执行了这部分逻辑，才导致编译失败。

• 检查新组件的所有导入：仔细看看你在新组件里import了哪些模块，有没有不小心引入了服务端专属的代码？比如apollo-server-micro是给Next.js API路由用的服务端Apollo框架，它内部依赖busboy处理文件上传，如果在客户端组件里导入它，百分百会出这个错。
• 区分服务端/客户端逻辑边界：Next.js的组件默认是客户端渲染的，不能调用fs、path这类Node核心模块。检查新组件里有没有写文件上传相关的逻辑，比如是不是直接在组件里初始化了服务端的上传处理工具？
• 排查动态导入的问题：如果用了next/dynamic加载组件，有没有确保依赖Node模块的代码只在服务端加载？比如是不是动态导入了某个包含busboy的模块，但没配置ssr: true，反而让客户端去加载了？

• 立刻移除客户端组件中的服务端依赖：如果发现新组件里导入了apollo-server-micro或者其他服务端专属库，直接删掉这些导入——客户端只需要用@apollo/client的代码就够了，服务端逻辑要放在pages/api目录下的API路由里。
• 用webpack配置临时规避（应急方案）：如果确实需要在客户端用到某些依赖Node核心模块的库，可以在next.config.js里添加webpack配置，让客户端编译时忽略fs模块：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false
      };
    }
    return config;
  },
};

⚠️ 注意：这只是临时解决办法，最好还是找到根源，把服务端和客户端代码彻底分开，不然可能会埋下其他隐患。

• 把文件上传逻辑移到服务端：如果你的组件涉及文件上传，要把上传的处理逻辑放在API路由里（比如pages/api/upload.js），客户端只负责把文件通过fetch或者Apollo Client的上传链接发送到API路由，绝对不要在客户端组件里直接处理服务端的上传逻辑。

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