我正在尝试部署到 Vercel,我之前已经在其他项目中完成过此操作,但在这种情况下,构建失败,它提到它找不到页脚组件,构建在本地计算机上完美运行。
11:55:14.850 Cloning completed in 533ms
11:55:14.851 Analyzing source code...
11:55:17.183 Installing build runtime...
11:55:17.605 Build runtime installed: 422.099ms
11:55:18.023 Looking up build cache...
11:55:18.054 Build cache not found
11:55:18.481 Installing dependencies...
11:55:18.694 yarn install v1.22.4
11:55:18.757 [1/4] Resolving packages...
11:55:19.090 [2/4] Fetching packages...
11:55:27.361 info [email protected]: The platform "linux" is incompatible with this module.
11:55:27.361 info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
11:55:27.365 info [email protected]: The platform "linux" is incompatible with this module.
11:55:27.365 info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
11:55:27.369 [3/4] Linking dependencies...
11:55:27.371 warning "@apollo/react-hooks > @apollo/[email protected]" has unmet peer dependency "subscriptions-transport-ws@^0.9.0".
11:55:27.376 warning " > [email protected]" has unmet peer dependency "eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0".
11:55:30.997 [4/4] Building fresh packages...
11:55:31.210 Done in 12.52s.
11:55:31.233 Running "yarn run build"
11:55:31.491 yarn run v1.22.4
11:55:31.513 $ next build
11:55:31.973 Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
11:55:32.044 Warning: No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
11:55:32.044 Creating an optimized production build...
11:55:32.098 Attention: Next.js now collects completely anonymous telemetry regarding usage.
11:55:32.098 This information is used to shape Next.js' roadmap and prioritize features.
11:55:32.099 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
11:55:32.099 https://nextjs.org/telemetry
11:55:44.385 Failed to compile.
11:55:44.385 ./components/App.js
11:55:44.385 Module not found: Can't resolve './Footer' in '/vercel/2e0a566d/components'
11:55:44.385 > Build error occurred
11:55:44.386 Error: > Build failed because of webpack errors
11:55:44.386 at build (/vercel/2e0a566d/node_modules/next/dist/build/index.js:13:900)
11:55:44.410 error Command failed with exit code 1.
11:55:44.410 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
11:55:44.419 Error: Command "yarn run build" exited with 1
11:55:46.448 Done with "package.json"
我从支持人员那里得到了帮助,似乎即使我的本地组件是大写的,远程分支也有一些组件是小写的。
确保您使用准确的文件夹/文件名正确导入组件。 例如,如果您有一个名为 main 的文件夹,其中包含 index.js 作为组件导出。 您必须从确切的文件夹名称(区分大小写)导出主要组件
// Content of index.js inside main folder
export default function Main() {}
// Use main component like this:
import Main from "./main";
export default function Home() {
return <Main />;
}
我也有类似的问题。它在本地构建得很好,但在 vercel 上构建时失败了。
我做了一些测试,发现问题与路径+文件名的总长度有关。
我组织了我的 apollo 查询,以便它们位于与集合查询同名的文件夹中。文件名是描述性的。 结果是很长的路径和文件名。
一个例子
09:53:38.510 Failed to compile.
09:53:38.510 ModuleNotFoundError: Module not found: Error: Can't resolve 'urbalurba/apollo/queries/entitynetmember/EntityNetworkMembershipByEntityIDandNetworkID' in '/vercel/workpath0/urbalurba/lib'
09:53:38.510 > Build error occurred
09:53:38.511 Error: > Build failed because of webpack errors
09:53:38.511 at build (/vercel/workpath0/node_modules/next/dist/build/index.js:15:918)
09:53:38.511 at runMicrotasks (<anonymous>)
09:53:38.511 at processTicksAndRejections (internal/process/task_queues.js:97:5)
如您所见,保存我的 graphql 突变的文件具有长文件名 EntityNetworkMembershipByEntityIDandNetworkID 上例中的文件夹是entitynetmember。
我将文件夹名称从entitynetworkmembership缩短为entitynetmember。完成此操作后,构建过程会找到该文件夹中的所有其他文件。
所以我的结论是总长度是导致构建失败的原因。
我遇到了同样的问题,删除
.next
文件夹并重建新版本。
我还遇到了 Vercel 构建错误(并且在本地主机中运行没有问题),这是一个大小写问题。当我尝试将 Comment 组件导入页面时,我收到 Vercel 构建错误:
Failed to compile.
./pages/{mypage.js}
Module not found: Can't resolve '../components/comment' in '/vercel/path0/pages/'
> Build failed because of webpack errors
error Command failed with exit code 1.
我最终通过将 Comment 组件大写来解决。如果我更改页眉或页脚组件的大小写以匹配注释组件,则会出现相同的错误。这就是我最终需要做的事情来消除构建错误......
import Comment from '../components/Comment'; //updated this import from comment to Comment
import Header from '../components/header'
import Footer from '../components/footer'
我的
package.json
"dependencies": {
"@formspree/react": "^2.2.5",
"@fortawesome/fontawesome-pro": "^6.0.0",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/pro-duotone-svg-icons": "^6.0.0",
"@fortawesome/pro-light-svg-icons": "^6.0.0",
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
"@fortawesome/pro-solid-svg-icons": "^6.0.0",
"@fortawesome/pro-thin-svg-icons": "^6.0.0",
"@fortawesome/react-fontawesome": "^0.1.17",
"add": "^2.0.6",
"babel-plugin-macros": "^3.1.0",
"disqus-react": "^1.1.3",
"next": "^12.1.6",
"nextjs-breadcrumbs": "^1.1.9",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-images": "^1.2.0-beta.7",
"react-photo-gallery": "^8.0.0",
"tailwindcss-hero-patterns": "^0.0.1",
"yarn": "^1.22.17"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "<8.0.0",
"eslint-config-next": "^12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.23"
}