React脚本引入报错：Uncaught ReferenceError: require is not defined

问题根源 #

你通过CDN引入的React和ReactDOM是作为全局变量挂载到浏览器环境的，完全不需要使用import语句。Babel Standalone会把import语法转换为Node.js环境的require写法，但浏览器本身不支持require方法，因此触发该报错。

修复方案 #

1. 移除App.js中的import语句 #

直接使用全局作用域下的React和ReactDOM变量即可，无需手动导入。

2. 修正组件渲染方式 #

调用root.render()时，必须传入组件的实例（即<Counter />），而不是组件本身的引用Counter。

修改后的代码 #

App.js #

function Counter() {
  return <h1>Hello World!</h1>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Counter />);

index.html（无需修改，仅作参考） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React-1</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="App.js"></script>
</body>
</html>

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