本地运行正常的Next.js项目部署Vercel时编译失败求助
问题
我把Next.js项目部署到Vercel时,出现“编译失败”错误,但构建日志里又显示编译成功,日志如下:
[16:43:24.951] Running build in Washington, D.C., USA (East) – iad1 [16:43:25.057] Cloning github.com/TDeV4/nextjs-boilerplate (Branch: main, Commit: ed2db9d) [16:43:25.609] Cloning completed: 552.422ms [16:43:28.872] Restored build cache [16:43:28.929] Running "vercel build" [16:43:29.394] Vercel CLI 32.0.1 [16:43:29.705] Installing dependencies... [16:43:30.766] [16:43:30.767] up to date in 739ms [16:43:30.767] [16:43:30.767] 136 packages are looking for funding [16:43:30.767] run `npm fund` for details [16:43:30.776] Detected Next.js version: 13.4.8 [16:43:30.779] Detected `package-lock.json` generated by npm 7+... [16:43:30.780] Running "npm run build" [16:43:31.035] [16:43:31.035] > nextjs@0.1.0 build [16:43:31.035] > next build [16:43:31.035] [16:43:31.570] - info Creating an optimized production build... [16:43:39.495] (node:151) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API [16:43:39.495] (Use `node --trace-deprecation ...` to show where the warning was created) [16:43:40.612] - info Compiled successfully [16:43:40.614] - info Linting and checking validity of types... [16:43:42.554] [16:43:42.554] Failed to compile. [16:43:42.554] [16:43:42.554] ./components/CoursePlanningTab.js [16:43:42.555] 130:19 Warning: Assignments to the 'dataToUse' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect. react-hooks/exhaustive-deps [16:43:42.556] [16:43:42.556] ./components/CreateProfile.js [16:43:42.556] 221:6 Warning: React Hook useEffect has a missing dependency: 'values'. Either include it or remove the dependency array. You can also do a functional update 'setValues(v => ...)' if you only need 'values' in the 'setValues' call. react-hooks/exhaustive-deps [16:43:42.556] [16:43:42.556] ./components/CreateReview.js [16:43:42.556] 58:6 Warning: React Hook useEffect has a missing dependency: 'getCourseStats'. Either include it or remove the dependency array. react-hooks/exhaustive-deps [16:43:42.556] [16:43:42.556] ./components/EditProfile.js [16:43:42.556] 296:6 Warning: React Hook useEffect has a missing dependency: 'props.userData.coursesTakenID'. Either include it or remove the dependency array. If 'setValues' needs the current value of 'props.userData.coursesTakenID', you can also switch to useReducer instead of useState and read 'props.userData.coursesTakenID' in the reducer. react-hooks/exhaustive-deps [16:43:42.557] 303:6 Warning: React Hook useEffect has a missing dependency: 'props.userData.coursesTakingID'. Either include it or remove the dependency array. If 'setValues' needs the current value of 'props.userData.coursesTakingID', you can also switch to useReducer instead of useState and read 'props.userData.coursesTakingID' in the reducer. react-hooks/exhaustive-deps [16:43:42.557] [16:43:42.557] ./components/EditReview.js [16:43:42.557] 150:6 Warning: React Hook useEffect has a missing dependency: 'props.reviewData.courseID'. Either include it or remove the dependency array. If 'setValues' needs the current value of 'props.reviewData.courseID', you can also switch to useReducer instead of useState and read 'props.reviewData.courseID' in the reducer. react-hooks/exhaustive-deps [16:43:42.557] 179:6 Warning: React Hook useEffect has missing dependencies: 'numOfCoursePairings', 'props.reviewData.coursepairingID', and 'props.reviewData.pairingrec'. Either include them or remove the dependency array. If 'setValues' needs the current value of 'props.reviewData.coursepairingID', you can also switch to useReducer instead of useState and read 'props.reviewData.coursepairingID' in the reducer. react-hooks/exhaustive-deps [16:43:42.557] 200:6 Warning: React Hook useEffect has a missing dependency: 'props.reviewData.semester'. Either include it or remove the dependency array. If 'setValues' needs the current value of 'props.reviewData.semester', you can also switch to useReducer instead of useState and read 'props.reviewData.semester' in the reducer. react-hooks/exhaustive-deps [16:43:42.557] [16:43:42.557] ./components/IndividualCourseInfo.js [16:43:42.557] 67:6 Warning: React Hook useEffect has missing dependencies: 'getCourseReviews' and 'getCourseStats'. Either include them or remove the dependency array. react-hooks/exhaustive-deps [16:43:42.557] 134:20 Error: Missing "key" prop for element in iterator react/jsx-key [16:43:42.557] [16:43:42.557] ./components/ReviewCard.js [16:43:42.560] 70:6 Warning: React Hook useEffect has missing dependencies: 'getAnonReviews' and 'getProfileInfo'. Either include them or remove the dependency array. react-hooks/exhaustive-deps [16:43:42.560] 91:7 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element [16:43:42.560] [16:43:42.560] ./components/TopNavBar.js [16:43:42.560] 17:15 Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element [16:43:42.560] [16:43:42.560] info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules [16:43:42.587] Error: Command "npm run build" exited with 1
我已经尝试修复警告,还在Vercel环境变量里设置了CLI=false,但还是失败。另外之前带着这些警告成功部署过一次,后来没改相关代码,更新部署就失败了。
补充:数据库现在在本地,Vercel访问不到,这会导致编译失败吗?我本来以为只会在访问网站时出错,不会影响构建阶段。
解决方法
- 优先修复ESLint错误:日志里明确有一个
Error: Missing "key" prop for element in iterator,在IndividualCourseInfo.js的134行。Next.js默认在构建时会把ESLint的错误当成构建失败的触发条件,警告不影响,但错误会直接导致构建终止。之前能部署可能是当时这个错误不存在,或者ESLint规则配置不同,现在必须给循环渲染的元素加上唯一的key属性。 - 检查ESLint配置变化:如果之前能带着警告部署,现在不行,可能是项目里的ESLint配置被修改了,比如把
error等级的规则范围扩大了。可以查看.eslintrc或者next.config.js里的ESLint相关配置,确认是否有规则被设为error级别。 - 本地复现构建流程:在本地执行
npm run build,看是否会出现同样的失败。这样能排除Vercel环境的问题,也能更直观地看到错误细节。 - 关于本地数据库的影响:如果你的项目在构建阶段(比如SSG/SSR页面)需要从数据库获取数据,那Vercel访问不到本地数据库会导致构建失败;如果只是客户端渲染时请求数据,那构建阶段不会受影响。可以检查页面是否有
getStaticProps、getServerSideProps这类在构建/请求时获取数据的函数,要是有,得把数据库改成Vercel能访问的线上服务,或者调整数据获取逻辑。 - 清除Vercel构建缓存:有时候缓存会导致奇怪的问题,在Vercel的项目设置里找到构建缓存选项,手动清除后重新部署试试。
内容的提问来源于stack exchange,提问作者TDeV4
相关产品推荐
相关产品推荐

