React.js 应用程序部署问题 [在本地工作但在部署时发生]

Question

我在 Vercel 上部署 React 应用程序时遇到问题（Netlify 上也发生同样的情况）。问题是应用程序在本地运行良好，但是当我尝试部署它时，它无法解析我已实现的上下文。下图显示了错误：

App.js 中的导入语句 使用Vite创建的项目。 [在此输入图像描述][1]

import { UserProvider } from './contexts/user/UserContext';
import { LoadingProvider } from './contexts/loading/LoadingContext';

Vercel 上的错误：

Could not resolve './contexts/user/UserContext' from src/App.jsx
error during build:
Error: Could not resolve './contexts/user/UserContext' from src/App.jsx
    at error (/vercel/path0/node_modules/rollup/dist/shared/rollup.js:198:30)
    at ModuleLoader.handleResolveId (/vercel/path0/node_modules/rollup/dist/shared/rollup.js:22508:24)
    at /vercel/path0/node_modules/rollup/dist/shared/rollup.js:22471:26
Error: Command "npm run build" exited with 1

Answer 1

错误消息

contexts/user/UserContext

表明它正在寻找

contexts/user/UserContext

在

/vercel/path0/node_modules/rollup/dist/shared

我怀疑您在构建环境中构建时的该位置可能没有名为

contexts

的子文件夹。

检查您在导入中使用的相对路径。您需要确保该文件夹在构建时位于正确的位置，并且导入路径在构建环境中正确解析。

Answer 2

如果您使用 GitHub，请确保本地和 GitHub 上的文件大小写均匹配。这是我遇到的问题以及我是如何解决的：

当我在本地重命名文件（例如

sidebarContext.jsx

）并将其推送到 GitHub 时，我遇到了类似的问题。后来我在本地把文件名改成了

SidebarContext.jsx

，但是在GitHub上推了

SidebarContext.jsx

之后依然没有变化——仍然显示为

sidebarContext.jsx

。因此，我的代码在本地运行良好，因为我在我的

SidebarContext

组件中导入了

App.jsx

：

import SidebarProvider from "../context/SidebarContext";

但是，当我尝试在 Vercel 上部署时，出现错误，指出无法从

SidebarContext.jsx

到达

"../context/SidebarContext.jsx"

中的

"src/App.jsx"

。在花费了大量时间进行故障排除后，我检查了 GitHub，发现 sidebarContext.jsx 尚未重命名为 SidebarContext.jsx。于是，我直接将GitHub上的文件重命名为SidebarContext.jsx，Vercel部署成功了。

如果这对您不起作用，请确保文件路径正确。