When I launch my React project in localhost environment by unknown reason it doesn`t load in chrome browser showing up this error in console “Uncaught SyntaxError: The requested module:

/src/pages/Donate.jsx’ does not provide an export named ‘Donate’ (at App.jsx:8:9)

When I cut and paste the import in App.jsx file for Donate.jsx and reload the page the error goes off sending other alert for Home.jsx component (this alert goes for all components AFIK):

 App.jsx?t=1725375166499:30 Uncaught ReferenceError: Home is not defined
 at App (App.jsx?t=1725375166499:30:82)
 at renderWithHooks (chunk-M324AGAM.js?v=5de9e74f:11546:26)
 at mountIndeterminateComponent (chunk-M324AGAM.js?v=5de9e74f:14924:21)
 at beginWork (chunk-M324AGAM.js?v=5de9e74f:15912:22)
 at HTMLUnknownElement.callCallback2 (chunk-M324AGAM.js?v=5de9e74f:3672:22)
 at Object.invokeGuardedCallbackDev (chunk-M324AGAM.js?v=5de9e74f:3697:24)
 at invokeGuardedCallback (chunk-M324AGAM.js?v=5de9e74f:3731:39)
 at beginWork$1 (chunk-M324AGAM.js?v=5de9e74f:19763:15)
 at performUnitOfWork (chunk-M324AGAM.js?v=5de9e74f:19196:20)
 at workLoopSync (chunk-M324AGAM.js?v=5de9e74f:19135:13)

And this only happens in Chrome Browser!

I’m attaching the code, so you can see if is an syntax error (unlikely) in the component itself or the main one App.jsx

Donate.jsx

import React from 'react';

const Donate = () => {

//things

};

export {Donate};

App.jsx

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NavBar from './components/Navbar';
import Footer from './components/Footer';
import {Home} from './pages/Home';
import {Media} from './pages/Media';
import {Events} from './pages/Events';
import {Donate}  from './pages/Donate';
import {Rules} from './pages/Rules';
import {Faith} from './pages/Faith';
import 'bootstrap/dist/css/bootstrap.min.css';
const App = () => {
  return (
    <Router>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="media" element={<Media />} />
        <Route path="events" element={<Events />} />
        <Route path="donate" element={<Donate />} />
        <Route path="rules" element={<Rules />} />
        <Route path="faith" element={<Faith />} />
      </Routes>
      <Footer />
    </Router>
  );
};

export default App;

I tried by changing to export default “componentName” from export {componentName}; in the components itself and removing {} if it may be affecting the import recognition but it didn`t change anything.

I tried launching my project (yarn dev command) in Edge, Firefox and there wasn`t any alert. Seems like Chrome has troubles with my export/import of my components by bs reason.

I hope someone can help me on this. Or tell me that it only happens in chrome local environment / if i deploy it on an hosting it wont be an actual issue.

UPD: Apparently this issue can be avoided by disabling the chache in Chrome DevTools/Network and reloading after the page. Anyway if anybody could provide more information ill be grateful.