使用React与Babel时遇模块加载错误，页面无法渲染求助

这个错误的核心原因是RequireJS（r.js）与全局CDN加载的React模块发生了冲突：

• 你通过CDN引入的React是全局变量形式，并没有注册为RequireJS的模块
• 同时你在app.js里使用了import语法，RequireJS会劫持模块加载逻辑，导致它试图去加载未注册的"react"模块，从而抛出错误

修复步骤： #

1. 移除RequireJS的引用
   你的场景不需要使用RequireJS管理模块，直接删掉HTML中这一行：

<script src="./node_modules/requirejs/bin/r.js"></script>

2. 修正app.js的语法问题

• React和ReactDOM已通过CDN全局注入，无需再用import导入
• 修复root.render的语法错误（多了一个左尖括号）

修改后的app.js代码：

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<p>Main page</p>);

3. 最终的HTML代码

<!DOCTYPE html>
<html lang="us">
<head>
<title>Test</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="./app.js" type="text/babel"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>

完成以上修改后，浏览器就能正常识别全局的React变量，Babel也能正确编译JSX语法，页面即可正常渲染。

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