NextJS/NextAuth引入getServerSession报错：Module not found: Can't resolve 'fs'

问题根源 #

你遇到的fs模块找不到错误，是因为[...nextauth].js中引入的bcrypt依赖了@mapbox/node-pre-gyp，而这个库使用了Node.js专属的核心模块fs——该模块仅在服务端环境存在，浏览器环境中没有。当你的Top组件被客户端渲染页面（比如_app.js）导入时，Webpack会尝试打包所有关联依赖，包括服务端专用的bcrypt及其依赖，最终在客户端环境触发找不到fs的错误。

另外，你在Top组件中导入了服务端专用的getServerSession和authOptions，这属于不必要的操作，会触发服务端依赖被错误打包到客户端。

解决步骤 #

1. 清理组件中的服务端代码导入 #

修改Top.js，移除不需要的服务端API导入：

// 删除以下两行导入
import { getServerSession } from "next-auth";
import { authOptions } from "../../pages/api/auth/[...nextauth]";

getServerSideProps是在服务端独立运行的，组件本体不需要导入这些服务端专属内容。

2. 配置Webpack忽略客户端环境的fs模块 #

在项目根目录的next.config.js中添加Webpack配置，告诉它在客户端打包时忽略fs模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
      };
    }
    return config;
  },
};

module.exports = nextConfig;

3. 优化Session传递逻辑 #

你的getServerSideProps已经正确获取了服务端Session，将其作为props传递给组件后，可以结合useSession的initialSession参数，避免客户端初始渲染时的null状态：

function Top({ session: serverSession }) {
  const { data: session} = useSession({
    initialSession: serverSession, // 用服务端传递的Session作为初始值
  });

  // 其余组件代码保持不变
}

4. 可选：替换bcrypt为客户端兼容库 #

如果上述配置仍有问题，可以将bcrypt替换为纯JS实现的bcryptjs，彻底规避服务端核心模块依赖：

1. 安装依赖：

npm install bcryptjs
# 或
yarn add bcryptjs

2. 在[...nextauth].js中替换导入：

// 替换原有的bcrypt导入
import bcrypt from 'bcryptjs'

验证修改 #

完成上述步骤后，重启Next.js开发服务器，检查错误是否消失，同时确认用户Session能正常展示。

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