CODEWITHSUNDEEP
javascriptreactjsweb-deploymentreact-contextvercel
Mahmoud
Mahmoud

Reputation: 3

React.js application deployment issue [Working on local but occurs on deployment]

I am facing an issue while deploying React app on Vercel (same happens on Netlify). The problem is the application is working well locally but, when I try to deploy it, it fails to resolve the context that I have implemented. The following image shows the error:

Import statements at App.js The project created using Vite. [enter image description here][1]

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

ERROR on 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

Upvotes: 0

Views: 1336

Answers (2)

Rashid Ameer
Rashid Ameer

Reputation: 1

If you're using GitHub, ensure that the file casing matches both locally and on GitHub. Here's an issue I encountered and how I resolved it:

I faced a similar issue when I renamed a file, for example, sidebarContext.jsx, locally and pushed it to GitHub. Later, I changed the file name to SidebarContext.jsx locally, but it remained unchanged on GitHub even after pushing SidebarContext.jsx—it still appeared as sidebarContext.jsx. Consequently, my code worked fine locally because I imported SidebarContext like this in my App.jsx component:

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

However, when I attempted to deploy on Vercel, an error occurred, stating that it couldn't reach SidebarContext.jsx in "../context/SidebarContext.jsx" from "src/App.jsx". After spending a considerable amount of time troubleshooting, I checked GitHub and discovered that sidebarContext.jsx hadn't been renamed to SidebarContext.jsx. So, I directly renamed the file on GitHub to SidebarContext.jsx, and the Vercel deployment was successful.

If this does not work for you make sure the file path is correct.

Upvotes: 0

Reg Edit
Reg Edit

Reputation: 6924

The error message contexts/user/UserContext shows that it's expecting to find

contexts/user/UserContext

in

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

I suspect you may not have a subfolder called contexts at that location at build time in the build environment.

Check your use of the relative path in your imports. You will need to ensure the folder ends up in the right place at build time, and that the import path resolves correctly in the build environment.

Upvotes: 0

Related Questions