未捕获的语法错误：请求的模块“ModulePath”未提供名为“Module”的导出（位于 App.jsx:8:9） - Chrome 浏览器问题

Question

当我由于未知原因在本地主机环境中启动 React 项目时，它不会在 Chrome 浏览器中加载，并在控制台中显示此错误“未捕获的语法错误：请求的模块：

/src/pages/Donate.jsx' 不提供名为“Donate”的导出（位于 App.jsx:8:9）

当我剪切并粘贴 Donate.jsx 的 App.jsx 文件中的导入并重新加载页面时，错误会停止发送 Home.jsx 组件的其他警报（此警报适用于所有组件 AFIK）：

App.jsx?t=1725375166499:30 未捕获的引用错误：主页未定义 在应用程序 (App.jsx?t=1725375166499:30:82) 在 renderWithHooks (chunk-M324AGAM.js?v=5de9e74f:11546:26) 在 mountInminatedComponent (chunk-M324AGAM.js?v=5de9e74f:14924:21) 在开始工作（chunk-M324AGAM.js？v=5de9e74f：15912：22） 在 HTMLUnknownElement.callCallback2 (chunk-M324AGAM.js?v=5de9e74f:3672:22) 在 Object.invokeGuardedCallbackDev (chunk-M324AGAM.js?v=5de9e74f:3697:24) 在 invokeGuardedCallback (chunk-M324AGAM.js?v=5de9e74f:3731:39) 在 beginWork$1 (chunk-M324AGAM.js?v=5de9e74f:19763:15) 在 PerformUnitOfWork (chunk-M324AGAM.js?v=5de9e74f:19196:20) 在工作LoopSync (chunk-M324AGAM.js?v=5de9e74f:19135:13)`

这只发生在 Chrome 浏览器中！

我附上代码，以便您可以查看组件本身或主要 App.jsx 中是否存在语法错误（不太可能）

捐赠.jsx

import React from 'react';

const Donate = () => {

//things

};

export {Donate};

应用程序.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;

我尝试更改为从导出 {componentName} 导出默认“componentName”；在组件本身中，如果可能影响导入识别，则删除 {}，但它没有改变任何东西。

我尝试在 Edge、Firefox 中启动我的项目（yarn dev 命令），但没有任何警报。似乎 Chrome 在导出/导入我的组件时遇到了麻烦。

我希望有人能在这方面帮助我。或者告诉我，它只发生在 chrome 本地环境中/如果我将它部署在托管上，它不会是一个实际问题。

UPD：显然可以通过禁用 Chrome DevTools/Network 中的 chache 并在页面后重新加载来避免此问题。无论如何，如果有人可以提供更多信息，我将不胜感激。

Answer 1

问题解决了！我有一个过时的反应版本。我将react-router-dom和react-dom更新到最新版本，react后问题就消失了。

纱线添加react@latestreact-dom@latestreact-router-dom@latest