使用CDN引入React/ReactDOM时无法导入JS子文件的求助

你当前的代码结构在浏览器环境下无法生效，核心原因是babel-standalone默认不处理ES模块的import/export语法，而且浏览器直接加载脚本时未启用模块模式，导致导入语句无法被正确解析。

提供两种可行修复方式，任选其一即可：

方式一：启用浏览器原生模块模式（推荐，保留文件拆分结构） #

1. 修改index.html中的脚本标签，添加模块模式声明，同时升级babel-standalone版本以支持模块编译：

<html>
    <head>
      <link rel="stylesheet" href="style.css" />
      <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>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
      <div id="root"></div>
      <!-- 添加type="module"和data-type="module"启用模块模式 -->
      <script src="index.js" type="module" data-type="module"></script>
    </body>
  </html>

2. 补全index.js中导入路径的.js后缀（浏览器模块模式要求完整文件扩展名），同时更新React 18的渲染方式：

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

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

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

注意：这种方式需要启动本地静态服务器（比如执行npx serve命令），不能直接双击打开本地HTML文件，否则会触发CORS错误。

方式二：合并组件代码到单个文件（适合快速测试） #

如果不想搭建服务器，可以把所有组件代码合并到index.html中，去掉export声明，直接定义全局组件函数：

<html>
    <head>
      <link rel="stylesheet" href="style.css" />
      <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>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <!-- 先定义所有组件 -->
      <script type="text/babel">
        function Header() {
          return (
            <header>
              <nav className="nav">
                <img src="./react-logo.png" className="nav-logo" />
                <ul className="nav-items">
                  <li>Pricing</li>
                  <li>About</li>
                  <li>Contact</li>
                </ul>
              </nav>
            </header>
          );
        }

        function MainContent() {
          return (
            <div>
              <h1>Reasons I'm excited to learn React</h1>
              <ol>
                <li>
                  It's a popular library, so I'll be able to fit in with the cool kids!
                </li>
                <li>I'm more likely to get a job as a developer if I know React</li>
              </ol>
            </div>
          );
        }

        function Footer() {
          return (
            <footer>
              <small>© 2021 Ziroll development. All rights reserved.</small>
            </footer>
          );
        }
      </script>
    </head>
    <body>
      <div id="root"></div>
      <!-- 渲染主应用 -->
      <script type="text/babel">
        function App() {
          return (
            <div>
              <Header />
              <MainContent />
              <Footer />
            </div>
          );
        }

        ReactDOM.render(<App />, document.getElementById("root"));
      </script>
    </body>
  </html>

这种方式无需服务器，直接打开HTML就能运行，但失去了文件拆分的优势，仅适合快速验证功能。

额外提示 #

• 正式开发时，建议使用Vite、Create React App等构建工具，它们会自动处理模块打包、编译等流程，无需手动配置babel-standalone。

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