ReactJS无法导入Header.js文件，报错：require is not defined

核心原因 #

这个报错本质是当前运行环境不识别CommonJS的require语法，同时你的ES6import配置未生效，导致环境 fallback 到CommonJS规范但又不支持。

具体解决步骤 #

1. 强制浏览器启用ES模块模式 #

在加载index.js的HTML脚本标签里添加type="module"属性：

<script type="module" src="./index.js"></script>

注意：启用模块模式后，所有导入的文件必须使用完整文件名后缀，你的导入代码需要修改为：

import Header from './Header.js'; // 补充.js后缀

2. 浏览器直接运行JSX的额外配置（无打包工具场景） #

如果没有用Webpack/Vite这类打包工具，直接在浏览器里写JSX，还需要配置转译依赖：

• 在HTML头部先引入React、ReactDOM的UMD版本和Babel转译器：

  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  

• 加载index.js的脚本标签需同时指定text/babel类型：

  <script type="module" text/babel src="./index.js"></script>
  

3. 检查文件路径与命名 #

• 确认Header.js和index.js在同一目录下，相对路径无层级错误
• 如果组件文件后缀是.jsx，导入时需写全./Header.jsx，同时确保环境支持.jsx文件解析

4. 脚手架环境的配置检查（Create React App/Vite场景） #

• Create React App默认已支持ES模块，若手动修改过webpack.config.js，需检查是否误禁用了模块配置
• Vite环境下，确认vite.config.js未禁用ES模块，且文件名后缀符合框架约定

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