React+CDN+Babel环境下导入JS文件报require未定义错误如何解决？

错误原因 #

你遇到的Uncaught ReferenceError: require is not defined是因为Babel Standalone默认会把ES6的import语法转成CommonJS的require()，但浏览器环境本身不支持CommonJS规范，所以报错了。

修复方案1：启用ES模块模式（推荐） #

1. 修改HTML中的脚本标签 #

给加载index.js的script标签加上data-type="module"，告诉Babel按ES模块处理文件：

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

2. 补全导入路径的文件后缀 #

浏览器的ES模块要求必须写完整的文件扩展名，修改index.js里的导入语句：

import Hello from "./source.js"; // 加上.js后缀
let root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

3. 用本地HTTP服务器运行项目 #

直接用浏览器打开本地HTML文件（file://协议）会触发CORS限制，导致模块加载失败。你可以用以下方式启动本地服务器：

• VS Code安装「Live Server」插件，右键HTML文件选择「Open with Live Server」
• 安装Node.js后，在项目目录执行npx http-server，然后访问提示的地址

修复方案2：使用全局变量（更简单的替代） #

如果不想折腾模块语法，可以把组件挂载到全局window对象上：

1. 修改source.js #

window.Hello = function Hello() {
    return <h1>Hello</h1>;
};

2. 在HTML中引入source.js #

要确保source.js在index.js之前加载：

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

3. 删除index.js中的导入语句 #

let root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);

这个方法不需要模块支持，直接用全局变量就能调用组件，也不用依赖HTTP服务器（但还是推荐用服务器运行，避免其他潜在问题）。

内容的提问来源于stack exchange，提问作者Euler's successor