Javascript ModuleNotFoundError:未找到模块：错误：Can'；t解析'/组件/图表/be.js'；在'/vercel/workpath0/my app/pages'；

我在通过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

组件从未使用任何服务器端方法或模块，只使用客户端中使用的库

从“react”导入{PureComponent}；
从'recharts'导入{Treemap，Tooltip}；
//一些内部代码
导出默认类将扩展为PureComponent{
建造师（道具）{
超级（道具）；
此.state={
数据：this.props.data
}
}
render（）{
返回(
);
}
}

在导入

be.js

组件的

index.js

中，使用正确的路径，并且不忽略

.js

扩展名。 我将所有组件的名称改为小写，以防出现有关大小写的错误

从“下一个/头部”导入头部
从“../styles/Home.module.css”导入样式
从“fs”导入fs；
从“../components/Layout.js”导入布局；
从“../lib/data_modifier.js”导入修改数据
从“../components/charts/BE.js”导入BE；
//有更多的进口组件
导出默认函数Home（{data}）{
//内部代码。没有错误
}
导出异步函数getStaticProps（）{
const rawData=fs.readFileSync（'./dataset/test.json'）；
const data=modifyData（JSON.parse（rawData））；
返回{
道具：{
数据
}
}
}

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

{
  "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”模块，在更改为小写后，您的远程分支可能不会用新名称更新，因为名称没有更改，只有小写字符。在Vercel和其他使用Linux的服务器中，会显示ModuleNotFoundError，因为在Linux中，相同的文件夹或文件（小写和大写）是不同的

---

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

在本地运行

npm run build

时是否出现任何错误？不，在运行

npm run build

时工作正常。坦白地说，我不知道这个命令，所以我第一次实现了它。无论如何，没有任何错误。