React运行报错：Cannot use import statement outside a module问题排查

你的React安装方式没问题，package.json是create-react-app生成的标准配置，依赖版本也正常。出现这个错误的原因和解决方案如下：

错误原因 #

1. 浏览器原生不支持ES模块的import语法，除非明确将script标签声明为模块类型。
2. 更关键的是，你的代码里包含JSX语法，浏览器无法直接解析，必须经过Babel转译；同时create-react-app的项目依赖webpack等构建工具处理模块打包，直接引入未构建的index.js文件必然报错。

正确解决方案（推荐） #

直接使用create-react-app提供的启动命令：

npm start

运行这个命令后，react-scripts会自动完成代码转译、模块打包，并启动开发服务器，你只需要访问默认的http://localhost:3000就能看到页面效果。项目public目录下的index.html里的script标签是构建后自动注入的，开发阶段不需要手动修改或添加引入。

临时测试方案（仅用于快速验证） #

如果你只是想快速在浏览器里跑简单代码，不依赖构建工具，可以这样做：

1. 修改HTML里的script标签，引入React、ReactDOM和Babel的CDN资源，并声明JSX转译：

<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/babel.min.js"></script>
<script type="text/babel" src="index.js"></script>

2. 修改index.js，去掉import语句，直接使用全局的React和ReactDOM：

const page = (   
   <div>
    <ul>
    <li>Anime Title</li> 
    <li>Genre</li>    
    <li>Rating</li>
    <li>Status</li>
    </ul>    
</div>
)
ReactDOM.render(page, document.getElementById("root"))

注意：这种方案仅适合小demo测试，生产环境必须使用构建工具打包。

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