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

Posted 2023-02-16

【中文标题】由于 Webpack 错误，nextJS 在 Vercel 上构建失败

【英文标题】：nextJS build fails on Vercel because of Webpack errors

【发布时间】：2020-11-27 02:51:03

【问题描述】：

我正在尝试部署到 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 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"

【问题讨论】：

它找不到你的页脚组件，你解决了吗？

【参考方案1】：

我得到了支持的帮助，似乎即使我的本地组件大写，远程分支的一些组件也小写了。

【讨论】：

谢谢，我遇到了类似的问题。多么奇怪，我的一些文件变成了小写，导致构建失败

你能举个例子吗，因为我遇到了同样的问题，但我的文件中没有一个是小写的

如果您执行仅区分大小写的文件重命名，通常会发生这种情况。只是为了让您不必查看其他地方，您可以使用以下命令强制更新 git 上的案例：git mv -f OldFileNameCase newfilenamecase（来自 ***.com/q/17683458/12094598）

【参考方案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 />;

【参考方案3】：

我也有类似的问题。它在本地构建得很好，但在 vercel 上构建时失败。

我做了一些测试，发现问题与路径+文件名的总长度有关。

我将我的 apollo 查询组织起来，以便它们位于与集合 tey 查询同名的文件夹中。并且文件名是描述性的。 结果是长路径和文件名。

一个例子

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。之后，该文件夹中的所有其他文件都被构建过程找到了。

所以我的结论是总长度是导致构建失败的原因。

【参考方案4】：

我遇到同样的问题，删除.next 文件夹并重建新版本。