ModuleNotFoundError：找不到模块：错误：无法解析“/vercel/workpath0/my-app/pages”中的“../components/charts/be.js”

我无意中通过 vercel 部署了我的 next.js 应用程序。 它在本地使用命令“npm run dev”运行得很好。 但是当我尝试通过 vercel 使用 Github 远程存储库部署它时，它会抛出如下错误

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

My 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扩展也是如此。 我将所有组件的名称更改为小写，以防出现有关大小写的错误。

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"
  }
}

我仅在内部使用了“fs”模块getStaticProps() in index.js.

更改为小写后，您的远程分支可能不会使用新名称进行更新，因为名称未更改，仅更改了小写字符。在Vercel等使用Linux的服务器中会出现ModuleNotFoundError，因为在Linux中相同的文件夹或文件的小写和大写是不同的。

修复远程分支中的名称以修复错误。