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组件从未使用任何服务器端方法或模块，而仅使用在客户端使用的库。

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

并且在index.js其中导入be.js组件，使用正确的路径并且不省略.js扩展名。我将所有组件的名称更改为小写，以防发生有关 Case 的错误。

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>
        );
      }
}

我的应用程序只是一个简单的单页，配置也非常简单。以防万一您应该查看我的依赖项版本，我将其附在下面。

{
  "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()in内部使用了 'fs' 模块index.js。

Answer 1

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

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