“找不到模块‘autoprefixer’”尽管本地成功，但 Next.js 在 Vercel 上构建失败并出现 Autoprefixer 错误

Question

在 Vercel 上部署时遇到一些奇怪的情况。让我很困惑。

部署日志报告以下错误：

1：版本不一致：

Package.json 指定 Next.js 15.0.0 Vercel 检测到 14.2.14 使用 15.0.0 构建运行 这可能可以解释缺少的拦截路由模块

2：模块解析找错地方：

缺少内部 Next.js 模块（拦截路由） 在yarn的全局模块而不是项目的node_modules中寻找自动前缀

# Version Mismatch:
[22:55:03.055] Detected Next.js version: 14.2.14
[22:55:06.976]   ▲ Next.js 15.0.0

# Module Resolution Error:
Failed to compile.
./node_modules/next/dist/shared/lib/router/utils/is-dynamic.js
Module not found: Can't resolve '../../../../server/future/helpers/interception-routes'

Import trace for requested module:
./node_modules/next/dist/shared/lib/router/utils/index.js
./node_modules/next/dist/shared/lib/page-path/denormalize-page-path.js
./node_modules/next/dist/server/get-page-files.js
./node_modules/next/dist/pages/_document.js

# Autoprefixer Error:
Error: Cannot find module 'autoprefixer'
Require stack:
- /usr/local/share/.config/yarn/global/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js

请记住，这种情况不会发生在我的本地环境中，只有在 Vercel 上部署时才会发生。

#local
> next build
▲ Next.js 15.0.0
Creating an optimized production build ...
✓ Compiled successfully

下面是我的相关package.json。我按照 claude 的说明进行操作，它告诉我将包从 devDependency 移动到依赖项，因为 Vercel 倾向于在安装它们后删除 devDependency 以最小化生产包大小。我不知道所以我就跟着。

"dependencies": {
  "autoprefixer": "^10.4.20",
  "tailwindcss": "^3.4.14",
   "tailwindcss-animate": "^1.0.7"
  "next": "14.1.4",
  "@prisma/client": "^5.16.1",
  ...
},
  "devDependencies": {
        "@types/node": "20.11.24",
        "@types/react": "18.2.61",
        "@types/react-dom": "18.2.19",
        "eslint": "^8",
        "eslint-config-next": "15.0.0",
        "typescript": "5.3.3"
    },
  ...
}

我根据克劳德和光标尝试了几种解决方案，但没有一个起作用。我已尝试重新安装依赖项并清除缓存，但问题仍然存在。我尝试使用

npm install autoprefixer postcss tailwindcss && npm install && next build

覆盖 Vercel 项目设置中的构建命令。还尝试在

autoprefixer

上强制安装，更改依赖项配置，但错误不会消失。

Module not found: Can't resolve '../../../../server/future/helpers/interception-routes'

错误也没有。

顺便说一句，Claude 认为可能存在构建环境不一致的情况，Vercel 正在使用全局纱线模块：

/usr/local/share/.config/yarn/global/node_modules/next/ 

，而我只使用 npm 的

 local node_modules/

。我是个新手，所以我不知道这可能/可能不会导致我观察到的任何问题。

我期望在 Vercel 上运行 npm run build 时，它的部署效果与本地部署一样好。我希望 Vercel 构建过程能够在生产构建过程中正确识别和使用 next.js 版本和 autoprefixer，而不会出现任何与版本不匹配或缺少模块相关的问题。我预计在清除缓存并重新安装依赖项后，构建将继续进行而不会出现错误，特别是因为它在本地运行良好。

谢谢你

Answer 1

没关系，我将整个 src 文件夹复制并粘贴到另一个新目录，并构建了一个新的项目根目录，它起作用了。彻底重建工作成功了。