Question

我在通过 vercel 部署我的 next.js 应用程序时偶然发现。它在本地使用命令“npm run dev”完全正常。但是当我尝试使用 Github 远程存储库通过 vercel 部署它时，它抛出如下错误：

    16:13:16.712    Attention: Next.js now collects completely anonymous telemetry regarding usage.
    16:13:16.712    This information is used to shape Next.js' roadmap and prioritize features.
    16:13:16.712    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:
    16:13:16.712    https://nextjs.org/telemetry
    16:13:20.255    Failed to compile.
    16:13:20.256    ModuleNotFoundError: Module not found: Error: Can't resolve '../config' in '/vercel/path0/components'
    16:13:20.257    > Build error occurred
    16:13:20.257    Error: > Build failed because of webpack errors
    16:13:20.257        at /vercel/path0/node_modules/next/dist/build/index.js:15:918
    16:13:20.257        at runMicrotasks (<anonymous>)
    16:13:20.258        at processTicksAndRejections (internal/process/task_queues.js:93:5)
    16:13:20.258        at async /vercel/path0/node_modules/next/dist/build/tracer.js:3:470
    16:13:20.269    npm ERR! code ELIFECYCLE
    16:13:20.269    npm ERR! errno 1
    16:13:20.272    npm ERR! myportfolio@0.1.0 build: `next build`
    16:13:20.272    npm ERR! Exit status 1
    16:13:20.272    npm ERR! 
    16:13:20.272    npm ERR! Failed at the myportfolio@0.1.0 build script.
    16:13:20.272    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    16:13:20.280    npm ERR! A complete log of this run can be found in:
    16:13:20.280    npm ERR!     /vercel/.npm/_logs/2021-04-04T15_13_20_272Z-debug.log

这是我的 package.json

{
  "name": "myportfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "3d-react-carousal": "^3.1.0",
    "airtable": "^0.10.1",
    "framer-motion": "^4.0.0",
    "next": "10.0.7",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-gtm-module": "^2.0.11",
    "react-intersection-observer": "^8.31.0",
    "react-lottie": "^1.2.3",
    "react-scroll": "^1.8.1",
    "react-toast-notifications": "^2.4.3"
  },
  "devDependencies": {
    "file-loader": "^6.2.0"
  }
}

这是我的 next.config.js

module.exports 
  ={
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(mp3)$/,
            use: {
              loader: 'file-loader',
              options: {
                publicPath: '/_next/static/sounds/',
                outputPath: 'static/sounds/',
                name: '[name].[ext]',
                esModule: false,
              },
            },
          });
      return config;
    }
  }

知道为什么在 Vercel 上部署时会引发编译错误吗？

Answer 1

vercel 使用区分大小写的 Linux，并将“/Components”读作与“/components”不同。

如果您将文件或文件夹名称更改为小写或大写，您的远程分支可能不会使用新名称更新。

在这种情况下，您可以使用命令 git mv oldNameFileOrFolder newNameFileOrFolder 并提交 + 推送。或者将文件或文件夹保存在另一个地方，将其从项目中删除并提交。提交后，在项目中再次过去，提交并推送。

ModuleNotFoundError：找不到模块：错误：无法解析“/vercel/path0/components”中的“../config”

1 个答案: