React报错：Cannot use import statement outside a module 求助

问题根源分析 #

你遇到的两个报错本质是两个核心问题：

1. Cannot use import statement outside a module：即便在package.json中添加了"type": "module"，直接用浏览器打开HTML文件时，浏览器既无法正确解析ES模块的依赖路径，也缺少JSX转译的关键环节。
2. 无法识别token '<'：浏览器原生不支持JSX语法，必须通过打包工具（如你安装的Vite）将JSX转译为普通JavaScript代码才能执行。

另外你的package.json存在配置冗余：scripts节点下的"type": "module"是无效配置，这一行需要删除——"type": "module"属于package.json的根节点配置，和scripts命令无关。

分步解决方案 #

1. 修正package.json配置 #

删除scripts里多余的"type": "module"，最终scripts部分如下：

"scripts": {
  "start": "vite",
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

2. 调整项目结构 #

按照Vite的默认约定组织文件：

• 在项目根目录创建src文件夹，将你的index.js移动到src目录下，并重命名为main.js（Vite默认入口文件是src/main.js）。
• 根目录保留index.html，修改其内容如下（无需手动清空body，直接准备好挂载节点即可）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Demo</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

3. 修正React入口代码 #

修改src/main.js，移除手动清空body的逻辑（HTML里已经有了#app节点），代码如下：

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

4. 启动开发服务器 #

在终端执行命令：

npm run dev

打开终端输出的本地地址（通常是http://localhost:5173），即可正常看到React渲染的内容。

关键说明 #

• 为什么不能直接用浏览器打开HTML？因为浏览器无法转译JSX，也无法正确处理npm安装的依赖（如react、react-dom）的模块路径，Vite会在开发过程中实时转译JSX、处理依赖解析，让浏览器能识别最终的代码。
• CDN+Babel的方式是在浏览器端实时转译JSX，适合快速原型测试，但实际开发中使用Vite这类打包工具是标准方案，它能提供更好的开发体验、打包优化和生产环境代码压缩。

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