Next.js部署至Vercel时触发React压缩错误#321，求排查方案

React错误#321的核心是在服务器渲染（SSR/SSG）过程中调用了不符合React规则的Hook，或存在React/ReactDOM依赖版本冲突、多实例问题，结合错误栈指向SessionProvider的useState调用，具体原因和解决方案如下：

可能的原因 #

• React/ReactDOM依赖冲突：错误栈显示react来自项目本地node_modules，而react-dom-server来自全局Yarn目录，全局与本地依赖版本不一致，导致React Hook调用时上下文不匹配。
• next-auth与Next.js版本不兼容：next-auth版本与当前使用的Next.js版本不匹配，导致SessionProvider在服务器渲染时出现异常。
• SessionProvider使用方式问题：服务器渲染页面中session参数传递异常，或未正确配置next-auth的服务端会话获取逻辑。

解决方案 #

1. 修复依赖冲突与多实例问题 #

• 清理本地依赖与缓存，重新安装：

rm -rf node_modules yarn.lock
yarn cache clean
yarn install

• 检查是否存在多版本React/ReactDOM：

yarn list react react-dom

若发现多个版本，在package.json中添加resolutions强制统一版本（以React 18.2.0为例）：

"resolutions": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

添加后重新执行安装命令。

• 确保Vercel构建使用项目本地依赖：在Vercel项目设置的构建命令中使用yarn build，避免调用全局模块。

2. 校验next-auth与Next.js版本兼容性 #

查看package.json中next和next-auth的版本，确保两者兼容：

• next-auth v4要求Next.js 12.2.0及以上；
• Next.js 13+建议搭配next-auth v4.20.0及以上版本。
  版本不匹配时，升级或降级到兼容版本：

# 升级next-auth到最新兼容版
yarn add next-auth@latest
# 或升级Next.js
yarn add next@latest

3. 调整SessionProvider的使用方式 #

• 若无需服务器端预传递session，可移除session参数，让SessionProvider自动处理客户端会话：

// 修改_app.js中的SessionProvider部分
<SessionProvider>
  <SWRConfig
    value={{
      fetcher: (url: string) => fetch(url).then((response) => response.json()),
    }}
  >
    {/* 其余代码保持不变 */}
  </SWRConfig>
</SessionProvider>

• 若需要服务器端传递session，确保所有页面的getServerSideProps或getStaticProps正确获取并传递session：

// 示例页面的getServerSideProps
import { getSession } from "next-auth/react";

export async function getServerSideProps(context) {
  const session = await getSession(context);
  return {
    props: { session },
  };
}

4. 验证构建与部署 #

本地执行yarn build && yarn start模拟生产环境运行，确认错误是否复现；若本地正常，重新部署到Vercel，确保构建过程无依赖警告。

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