React项目本地环境Chrome浏览器组件导出导入异常排查

问题现象 #

本地启动React项目时，Chrome浏览器出现以下异常表现：

• 首次加载时报错：

Uncaught SyntaxError: The requested module '/src/pages/Donate.jsx' does not provide an export named 'Donate' (at App.jsx:8:9)

• 将App.jsx中Donate组件的导入语句剪切粘贴后刷新页面，Donate的错误消失，但随即触发所有其他组件（如Home）的Uncaught ReferenceError: Home is not defined错误
• 该问题仅在Chrome中出现，Edge、Firefox运行yarn dev启动项目无任何异常
• 尝试将组件的命名导出export {Donate}改为默认导出export default Donate并对应修改导入方式，问题未得到解决
• 禁用Chrome DevTools的Network缓存后刷新页面，可规避该问题

原因分析 #

这是Chrome浏览器的ES模块强缓存机制导致的：

1. 本地开发时，Vite等构建工具采用ES模块热更新，而Chrome对已加载的ES模块会进行强缓存，不会主动校验文件是否更新
2. 当你调整组件导出方式或修改导入语句后，Chrome仍在使用旧的缓存模块，导致新旧模块的导出与导入规则不匹配，触发报错
3. 剪切粘贴导入语句刷新时，浏览器重新请求了Donate模块，但其他组件的缓存未被清除，因此报错转移到其他未更新缓存的组件上
4. Edge和Firefox对本地开发环境的模块缓存策略更宽松，会主动校验文件变化，所以未触发该问题

部署到服务器后的情况 #

部署到生产环境后，基本不会出现这类问题：

1. 生产构建时，所有组件会被打包成带哈希值的静态文件（例如Donate.abc123.js），哈希值会随代码内容变化而更新
2. 当代码迭代更新时，新文件的哈希值与旧文件不同，浏览器会自动请求新文件，不会复用旧缓存
3. 即使服务器配置了缓存策略，也会基于文件名的哈希值实现缓存失效，不会出现本地开发时的缓存不匹配问题

相关代码 #

Donate.jsx

import React from 'react';

const Donate = () => {
  // 组件逻辑
};

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;

内容的提问来源于stack exchange，提问作者Igor Yurievich