ModuleNotFoundError：找不到模塊：錯誤：無法解析“/vercel/workpath0/my-app/pages”中的“../components/charts/be.js”

Question

我偶然發現通過 vercel 部署我的 next.js 應用程序。 使用命令“npm run dev”在本地運行良好。 但是當我嘗試使用 Github 遠程存儲庫通過 vercel 部署它時，它會引發如下錯誤

18:07:58.299    Failed to compile.
18:07:58.299    ModuleNotFoundError: Module not found: Error: Can't resolve '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'
18:07:58.299    > Build error occurred
18:07:58.300    Error: > Build failed because of webpack errors
18:07:58.300        at /vercel/workpath0/my-app/node_modules/next/dist/build/index.js:15:918
18:07:58.300        at processTicksAndRejections (internal/process/task_queues.js:97:5)
18:07:58.300        at async /vercel/workpath0/my-app/node_modules/next/dist/build/tracer.js:1:525

我的be.js組件從未使用過任何服務器端方法或模塊，而只是在客戶端使用了一個庫。

import { PureComponent } from "react";
import { Treemap, Tooltip } from 'recharts';

// some internal code

export default class BE extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            data : this.props.data
        }
    }
    render() {
        return (
            <Treemap
                width={500}
                height={300}
                data={this.state.data}
                dataKey="size"
                ratio={4 / 3}
                stroke="#fff"
                fill="#8884d8"
                content={<CustomizedContent colors={COLORS} />}
                style={{marginTop:50}}
            >
                <Tooltip content={<CustomTooltip/>}/>
            </Treemap>
        );
      }
}

而且在index.js中，它導入了be.js組件，使用正確的路徑並且不省略.js擴展名。 我將所有組件的名稱更改為小寫，以防萬一發生有關 Case 的錯誤。

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import fs from 'fs';
import Layout from '../components/layout.js';
import modifyData from '../lib/data_modifier.js'

import BE from '../components/charts/be.js';
// there are more imported components


export default function Home({ data }) {
  // internal code. no error
}
export async function getStaticProps() {
  const rawData = fs.readFileSync('./dataset/test.json');
  const data = modifyData(JSON.parse(rawData));
  return {
    props: {
      data
    }
  }
}

我的應用程序只是一個簡單的單頁，配置也很簡單。 以防萬一您應該查看我的依賴項版本，我將其附在下面。

{
  "dependencies": {
    "bootstrap": "^4.5.3",
    "fs": "0.0.1-security",
    "next": "^10.0.5",
    "react": "^16.13.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^16.13.1",
    "recharts": "^1.8.5"
  }
}

我只在index.js的getStaticProps()內部使用了“fs”模塊。

Answer 1

更改為小寫后，您的遠程分支可能不會使用新名稱更新，因為名稱沒有更改，只有小寫字符。 在 Vercel 和其他使用 Linux 的服務器中，將顯示 ModuleNotFoundError，因為在 Linux 中，相同的文件夾或文件的小寫和大寫不同。

修復遠程分支中的名稱以修復錯誤。

Answer 2

我在第一次部署時遇到了類似的問題。

我試圖更改組件名稱、 import path (full with.js) 、不同的提供程序等...

唯一對我有幫助的是刪除 Git 存儲庫並從 Visual Studio Code 推送一個新存儲庫。 之后，該構建在 Vercel 和 DigitalOcean 上都取得了成功。

Answer 3

我最近遇到了同樣的問題。 所以基本上，我使用了錯誤的方式來導入我的布局組件。 我import Layout from 'path-to-component/layout'但在我的 Layout 組件中export default function Layout()... 我的修復：

1. 確保您正在導出和導入正確的文件
2. 運行git rm -r --cached. 此命令將刪除 git 中的所有緩存文件。
3. 刪除所有緩存文件后，我們需要使用更新再次將所有文件添加到 git。 所以運行git add --all.
4. 運行git commit -m "commit message here!!!"
5. 運行git push origin 'github branch name' ，將代碼推送到 github