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

【问题标题】：ModuleNotFoundError: Module not found: Error: Can't resolve '../components/charts/be.js' in '/vercel/workpath0/my-app/pages'ModuleNotFoundError：找不到模块：错误：无法解析“/vercel/workpath0/my-app/pages”中的“../components/charts/be.js”
【发布时间】：2021-12-06 05:21:02
【问题描述】：

我偶然发现通过 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 扩展。我将所有组件的名称都更改为小写，以防万一发生错误。

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”模块。

【问题讨论】：

在本地运行npm run build时是否遇到任何错误？
不，运行npm run build 时可以正常工作。坦率地说，我不知道命令，所以我第一次实现它。无论如何，没有任何错误。

标签： javascript reactjs webpack next.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我在第一次部署时遇到了类似的问题。

我尝试更改组件名称、import path (full with .js)、不同的提供程序等...

唯一对我有帮助的是删除 Git 存储库并从 Visual Studio Code 推送一个新存储库。之后，该构建在 Vercel 和 DigitalOcean 上都取得了成功。

【讨论】：

【解决方案3】：

我最近遇到了同样的问题。所以基本上，我使用了错误的方式来导入我的布局组件。我写了import Layout from 'path-to-component/layout'，但我的布局组件中有export default function Layout()...。我的解决方法：

确保您正在导出和导入正确的文件
运行git rm -r --cached .此命令将删除您的git中的所有缓存文件。
删除所有缓存文件后，我们需要将所有文件再次添加到 git 中并进行更新。所以运行git add --all .
运行git commit -m "commit message here!!!"
运行git push origin 'github branch name'，将代码推送到github

【讨论】：