如何在React组件中嵌套另一组件？解决import语句模块外使用报错

我有一年多React开发经验，之前一直用入职时公司已经搭建好的开发系统，新建组件只要沿用现有语法就能正常运行。但自己在本地搭建环境写简单React代码时却处处碰壁，搞不清是语法问题还是JavaScript环境配置的问题。

可正常运行的基础代码 #

react-test.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react-test-2</title>
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>

    <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="React_Components/AAA.js"></script>

    <script>
      $(document).ready(function() {
          const domContainer = document.querySelector('#react-container');
          const root = ReactDOM.createRoot(domContainer);
          root.render(React.createElement(AAA));
      });
    </script>

</head>

<body>
  <div id="react-container"></div>
</body>
</html>

AAA.jsx #

function AAA(){
    return (<div>AAA</div>);
}

.jsx文件存放于React_Components_JSX目录，由Babel预处理器监听并转换为React_Components目录下对应的.js文件，访问该HTML页面可正常渲染出“AAA”。

修改后报错的代码 #

尝试在AAA组件中嵌套BBB组件，修改后的代码如下：

AAA.jsx #

import BBB from '../React_Components_JSX/BBB.jsx';

function AAA(){
    return (<div>AAA<BBB/></div>);
}

BBB.jsx #

export default function BBB(){
    return (<div>BBB</div>);
}

修改后页面始终报错：Cannot use import statement outside a module，不清楚报错的本质含义及如何正确配置应用环境。

报错原因与解决方法 #

报错本质 #

浏览器默认将普通<script>标签加载的JavaScript文件视为非模块脚本，这种模式下不支持ES6的import/export模块语法。你之前的基础代码仅全局定义了AAA函数，没有使用模块导入，所以能正常运行；但添加import BBB后，转译后的JS文件保留了模块语法，浏览器执行时就会触发该报错。

具体解决步骤 #

• 给脚本标签添加模块类型：在HTML中加载转译后的AAA.js时，给<script>标签加上type="module"属性，告知浏览器这是ES模块：

  <script type="module" src="React_Components/AAA.js"></script>
  

• 调整Babel转译配置：确保Babel正确处理模块语法，推荐保留ES模块格式（配合type="module"）。修改Babel配置文件：

  // babel.config.json
  {
    "presets": [
      ["@babel/preset-env", {"modules": false}], // 保留ES模块语法
      "@babel/preset-react"
    ]
  }
  

  转译时使用包含@babel/preset-env和@babel/preset-react的命令，确保JSX和模块语法都被正确处理。
• 修正组件引用路径：转译后的JS文件中，import路径要指向转译后的BBB.js文件，而非原JSX文件。比如AAA.jsx里的引用应改为：

  import BBB from '../React_Components/BBB.js';
  

• 简化DOM加载逻辑（可选）：React 18的createRoot无需依赖jQuery的$(document).ready，模块脚本会自动延迟执行，可简化HTML中的脚本部分：

  <script type="module">
    const domContainer = document.querySelector('#react-container');
    const root = ReactDOM.createRoot(domContainer);
    root.render(React.createElement(AAA));
  </script>
  

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