部署NextJS到Vercel后出现createAsyncThunk is not a function报错如何解决

可能的触发原因 #

• @reduxjs/toolkit 版本过低：createAsyncThunk 是在 @reduxjs/toolkit@1.3.0 版本才正式加入的API，如果你的依赖版本低于该值，就会出现该报错。如果项目中有其他依赖强制拉低了 @reduxjs/toolkit 的版本，也会导致多版本共存、实际加载的版本不符合预期。
• 构建缓存异常：Vercel 部署时会默认缓存 node_modules 和构建产物，如果缓存的依赖包存在损坏、版本不对的问题，即使你本地重装了依赖，部署后依然会报错。
• NextJS 打包配置问题：如果你的 next.config.js 中配置的 externals 规则错误排除了 @reduxjs/toolkit，或者没有对该依赖做转译处理，会导致SSG阶段运行的服务端代码加载依赖失败。
• 路径别名冲突：如果你的 jsconfig.json/tsconfig.json 中配置的 paths 别名意外匹配到了 @reduxjs 相关的导入路径，会导致实际加载的不是正确的依赖包。

排查解决步骤 #

1. 首先确认依赖版本，打开 package.json 检查 @reduxjs/toolkit 的版本号，确保 ≥1.3.0：

{
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.7"
  }
}

运行以下命令检查是否存在多版本共存的情况：

# npm
npm ls @reduxjs/toolkit
# yarn
yarn list @reduxjs/toolkit
# pnpm
pnpm ls @reduxjs/toolkit

如果存在多版本，在 package.json 中指定 resolutions（yarn/pnpm）或者 overrides（npm）固定版本即可。

2. 清理缓存重新部署
   本地先删除 node_modules 以及锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新安装依赖后执行 next build 确认本地构建是否正常。如果本地正常，到 Vercel 项目部署页面，勾选「Clear build cache before deploying」选项重新部署即可。

3. 调整 NextJS 打包配置
   在 next.config.js 中添加转译配置，确保 @reduxjs/toolkit 被正确打包：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@reduxjs/toolkit'],
  // 检查是否有错误的externals配置，有的话删掉相关规则
  // externals: ['@reduxjs/toolkit'] 这类配置要删除
}

module.exports = nextConfig

4. 额外注意：不要在 getStaticProps 中直接调用 Redux Thunk 方法，getStaticProps 运行在服务端，没有对应的 Redux Store 实例，直接调用 thunk 会导致逻辑异常，SSG 阶段的请求直接写原生请求逻辑即可，不需要走 Redux。

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