javascript - ModuleNotFoundError : Module not found: Error: Can't resolve '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'

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

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

Answer 1

更改为小写后，您的远程分支可能不会使用新名称更新，因为名称没有更改，只有小写字符。在 Vercel 和其他使用 Linux 的服务器中会显示 ModuleNotFoundError，因为在 Linux 中相同的文件夹或文件的小写和大写是不同的。
修复远程分支中的名称以修复错误。