使用React CDN时出现Uncaught ReferenceError: require is not defined错误求助

问题背景 #

通过CDN引入React和ReactDOM，未使用Node包管理工具，HTML、index.js、Header.js文件同目录，运行时出现以下错误：

Uncaught ReferenceError: require is not defined
    at <anonymous>:3:15
    at ive (transformScriptTags.ts:99:10)
    at n (transformScriptTags.ts:173:9)
    at s (transformScriptTags.ts:204:11)
    at t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)

错误原因 #

浏览器原生环境不支持Node.js的CommonJS模块机制（即require函数），而Babel Standalone默认会将ES模块的import/export语法转换为CommonJS的require，导致浏览器无法识别该函数。

解决方案 #

提供两种适配CDN环境的修改方案，按需选择：

方案1：使用浏览器原生ES模块（推荐） #

这种方式符合现代浏览器的模块标准，同时保留组件拆分的写法：

1. 修改HTML文件中的script标签，将index.js的引入改为模块类型，并让Babel支持模块编译，同时修正#root容器的位置（需在<body>内）：

<!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>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <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>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="root"></div>
    <!-- 修改为模块类型，让Babel处理ES模块 -->
    <script type="text/babel" data-type="module" src="index.js"></script>
  </body>
</html>

2. 保留Header.js的ES模块导出：

function Header() {
  return (
    <header>
      <nav className="nav">
        <img src="./images/logo.png" className="logo"></img>
        <ul className="nav-items">
          <li>Pricing</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
  );
}

export default Header;

3. 保留index.js的ES模块导入，并更新为React 18推荐的渲染API：

import Header from "./Header.js";
// import MainComponent from "./MainComponent.js";
// import Footer from "./Footer.js";

function Page() {
  return (
    <>
      <Header />
    </>
  );
}

// React 18 官方推荐的渲染方式
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page />);

方案2：全局挂载组件（无需模块系统） #

如果不想使用ES模块，可以将组件直接挂载到全局window对象上，避免模块语法：

1. 修改Header.js，去掉导出语句，改为挂载到全局：

function Header() {
  return (
    <header>
      <nav className="nav">
        <img src="./images/logo.png" className="logo"></img>
        <ul className="nav-items">
          <li>Pricing</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
  );
}

// 将组件挂载到全局window对象
window.Header = Header;

2. 修改HTML文件，先引入Header.js再引入index.js（确保组件先定义）：

<!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>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <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>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div id="root"></div>
    <!-- 先引入Header.js，确保组件已定义 -->
    <script type="text/babel" src="Header.js"></script>
    <script type="text/babel" src="index.js"></script>
  </body>
</html>

3. 修改index.js，去掉导入语句，直接使用全局的Header组件：

// import Header from "./Header.js";
// import MainComponent from "./MainComponent.js";
// import Footer from "./Footer.js";

function Page() {
  return (
    <>
      <Header />
    </>
  );
}

// React 18 官方推荐的渲染方式
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page />);

额外提示：React 18中ReactDOM.render已标记为过时，建议使用createRoot API进行渲染，上述两种方案都已更新为该写法。

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