logo标签列表

由于Webpack错误，NextJS在Vercel上构建失败

webpacknext.jsyarnpkgvercel
14

我正在尝试将项目部署到Vercel上。虽然我之前已经用Vercel部署过其他项目，但是在这个项目中出现了构建失败的问题。报错信息显示无法找到Footer组件，但是在本地机器上构建却可以正常进行。

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 fsevents@2.1.3: The platform "linux" is incompatible with this module.
11:55:27.361    info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
11:55:27.365    info fsevents@1.2.13: The platform "linux" is incompatible with this module.
11:55:27.365    info "fsevents@1.2.13" 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/client@3.1.2" has unmet peer dependency "subscriptions-transport-ws@^0.9.0".
11:55:27.376    warning " > eslint-config-airbnb@18.2.0" 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"
它找不到您的页脚组件，您已经解决了吗？ - Freestyle09
6个回答
19

我得到了支持的帮助，似乎尽管我的本地组件是大写的，但远程分支中有一些小写的组件。

3
谢谢，我也遇到了类似的问题。很奇怪，我的一些文件变成小写后，导致构建失败。 - hadi tedi
你能给一个例子吗？我遇到了同样的问题，但我的文件中没有一个是小写的。 - La pach'
3
如果你只是大小写敏感地重命名文件，通常会出现这种情况。为了避免让你到其他地方查找，你可以使用下面的命令强制更新 Git 上的大小写：git mv -f 旧文件名大小写 新文件名大小写（来自 https://dev59.com/aWMm5IYBdhLWcg3wVt4s）。 - Killian Huyghe
2

确保您正确导入组件，并使用确切的文件夹/文件名。 例如，如果您有一个名为main的文件夹，其中包含作为组件导出的index.js。 您将不得不从确切的文件夹名称（区分大小写）导出Main组件。

// 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 />;
}
1
我遇到了同样的问题，删除.next文件夹并重新构建新版本。
1
我有一个类似的问题。在本地构建时可以成功，但在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 mutation的文件名非常长，为EntityNetworkMembershipByEntityIDandNetworkID。上面的示例文件夹名为entitynetmember。
我将文件夹名从entitynetworkmembership缩短为entitynetmember。在这样做之后，该文件夹中的所有其他文件都被构建过程找到了。
因此，我的结论是总长度导致了构建失败。
0

带有错误消息的图像

我在尝试将我的NextJS应用部署到Vercel时遇到了类似的问题。我试图从一个名为"navbar"的小写文件中导入"Navbar"组件。我不明白为什么它仍然有构建错误，但由于我的构建中的第一个错误消息是"Prevent writing to file that only differs in casing or query string from already written file"，所以我只是将"navbar"文件名简单地改为"nav"。我不想冒险因为名称相似性，这可能会进一步复杂化大小写问题。这样就解决了问题。

0

我也遇到了Vercel构建错误（但在本地主机上没有问题），这是一个大小写问题。当我尝试将评论组件导入页面时，我遇到了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组件大写。但如果我改变Header或Footer组件的大小写以匹配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"
  }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接