React入门遇Uncaught ReferenceError: require未定义问题求助

一、修复Uncaught ReferenceError: require is not defined错误 #

你通过CDN引入的是React和ReactDOM的UMD版本，这类包会在浏览器全局作用域暴露React和ReactDOM对象，而非提供ES模块的import接口。你的内联JSX脚本使用了import语法，Babel会将其转译为Node.js环境的require调用，但浏览器原生不支持require，因此触发报错。

修改内联脚本，直接使用全局变量：

<script type="text/jsx">
  const app = document.getElementById('main-div');
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship. 🚀</h1>);
</script>

二、解决单独JS文件的JSX转译问题 #

浏览器中的Babel Standalone仅会处理type="text/jsx"标记的内联脚本，无法自动转译外部JS文件。你需要通过本地Babel命令提前完成转译，再引入处理后的文件：

1. 修正Babel转译命令
   当前命令重复指定--presets参数，合并为以下写法：

npx babel --watch src --out-dir . --presets react-app/prod,@babel/preset-env

该命令会监听src目录下的文件，实时转译后输出到当前目录。

2. 编写源JSX文件（示例：src/app.jsx）

const app = document.getElementById('main-div');
const root = ReactDOM.createRoot(app);
root.render(<h1>Develop. Preview. Ship. 🚀</h1>);

无需使用import，直接依赖全局的ReactDOM对象即可。

3. 在HTML中引入转译后的文件
   转译完成后，当前目录会生成对应源文件的标准JS文件（比如app.js），直接引入：

<script src="./app.js"></script>

此时不需要指定type="text/jsx"，因为文件已经是转译后的合法JavaScript代码。

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