The following error appears whenever I try to deploy a react js project from GitHub on vercel:
error during build:
RollupError: Could not resolve "./layout/news/news" from "src/App.jsx"
at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:24860:24)
at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:24822:26
Error: Command "npm run build" exited with 1
I made sure that the path mentioned exists: ./layout/news/news It already exists and is called correctly in the app.jsx file!
this is the code in github: https://github.com/Tasneem-FR/language_center.git
and this is the content of: src/App.jsx:
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Sidebar from './layout/Sidebar/Sidebar';
import Content from './layout/Content/Content';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Books from './layout/Books/Books';
import News from './layout/News/News';
import ChangePassword from './layout/ChangePassword/ChangePassword';
import Marks from './layout/marks/Marks';
function App() {
return (
<Router>
<div className='app'>
<Routes>
<Route path="/" element={ <Content /> } />
<Route path="/books" element={<Books />} />
<Route path="/news" element={<News />} />
<Route path="/marks" element={<Marks/>} />
<Route path="/changepassword" element={<ChangePassword />} />
</Routes>
<Sidebar />
</div>
</Router>
)
}
export default App;
and this is the content of layout/news/news , which was imported correctly
import "./News.css";
import ContentTop from '../../components/ContentTop/ContentTop';
import NewsMain from "../../components/NewsMain/NewsMain";
const News = () => {
return (
<div className='main-content'>
<ContentTop />
<NewsMain/>
</div>
)
}
export default News