NextJS中getServerSideProps调用serverless-mysql出现fs模块缺失错误如何解决

错误原因 #

这个报错的核心是mysql/serverless-mysql依赖Node.js原生的fs模块，而Next.js在打包客户端侧代码时，尝试把这些服务端专属依赖打包进了浏览器环境的bundle，浏览器没有fs模块就触发了报错。

你可能会疑惑getServerSideProps明明是服务端运行的，为什么还会触发客户端打包：是因为你的依赖链路里，./lib/components/admin/_bans.js引入了db.js，而这个_bans.js同时被页面的客户端组件逻辑和getServerSideProps引入了——只要某个文件被客户端侧代码引用过，Next.js默认就会把它的所有依赖都尝试做客户端打包，不管你是不是只在服务端函数里用了其中的数据库逻辑。

解决方案 #

按优先级推荐以下方案：

• 拆分混合依赖的文件：把_bans.js拆成两个独立文件，一个只存放服务端数据库查询逻辑（仅在getServerSideProps中导入），一个只存放客户端组件代码，完全切断客户端代码对db.js的导入链路。
• 标记服务端专属文件：如果你使用Next.js 12及以上版本，可以将db.js重命名为db.server.js，Next.js打包器会自动将该文件从客户端bundle中排除，不会尝试打包它的服务端依赖。
• 配置webpack外部依赖：在next.config.js中手动指定客户端打包时忽略服务端专属包，配置如下：

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // 客户端打包时排除mysql相关包
      config.externals.push('mysql', 'serverless-mysql')
    }
    return config
  }
}

你可以先临时注释掉页面组件中所有对_bans.js的导入（只保留getServerSideProps中的查询调用）测试，如果报错消失即可确认是客户端侧导入导致的问题。

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