Runs fine locally, Issue importing components on render.com

1

renderShot
renderShot234×568 11.6 KB

My error:
error during build:
RollupError: Could not resolve “./components/PrivateRoute” from “src/App.jsx”
file: /opt/render/project/src/client/src/App.jsx
at getRollupEror (file:///opt/render/project/src/client/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at error (file:///opt/render/project/src/client/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
at ModuleLoader.handleInvalidResolvedId (file:///opt/render/project/src/client/node_modules/rollup/dist/es/shared/node-entry.js:18907:24)
at file:///opt/render/project/src/client/node_modules/rollup/dist/es/shared/node-entry.js:18867:26
s

My App.jsx:
import { BrowserRouter, Routes, Route } from ‘react-router-dom’;
import Home from ‘./pages/Home’;
import SignIn from ‘./pages/SignIn’;
import SignUp from ‘./pages/SignUp’;
import About from ‘./pages/About’;
import Profile from ‘./pages/Profile’;
import PrivateRoute from ‘./components/PrivateRoute’;
import Header from ‘./components/Header.jsx’;
import CreateListing from ‘./pages/CreateListing’;
import UpdateListing from ‘./pages/UpdateListing’;
import Listing from ‘./pages/Listing’;
import Search from ‘./pages/Search’;

export default function App() {
return (



<Route path=‘/’ element={} />
<Route path=‘/SignIn’ element={} />
<Route path=‘/SignUp’ element={} />
<Route path=‘/about’ element={} />
<Route path=‘/search’ element={} />
<Route path=‘/listing/:listingId’ element={} />

    <Route element={<PrivateRoute />}>
      <Route path='/Profile' element={<Profile />} />
      <Route path='/create-listing' element={<CreateListing />} />
      <Route
        path='/update-listing/:listingId'
        element={<UpdateListing />}
      />
    </Route>
  </Routes>
</BrowserRouter>

);
}

2

Hi,

There will always be differences between environments: development mode/Local, production mode/Render, etc. These differences need to be considered and configured as required for your own app in each environment.

Render uses Linux which has a case-sensitive filesystem. Your references to filenames must match exactly.

I suspect the src/components/PrivateRoute path is actually cased differently. Check file casing in git, not in VS Code.

Kind regards

Alan