ES6语法导入React报错，寻求有效解决方案

问题原因 #

你遇到的Uncaught TypeError: Failed to resolve module specifier "react"错误，本质是浏览器原生ES模块不支持"裸模块说明符"——也就是直接写import React from "react"这种包名导入。浏览器要求模块路径必须是相对路径（.//../）、绝对路径或者完整URL，没法直接解析npm包名。

另外你代码里还有个小问题：container.render(App)是错误的，render方法需要接收React元素，不是组件函数，得改成container.render(React.createElement(App))。

解决方案 #

方案1：CDN + 导入映射（快速测试首选） #

这是无需构建工具的最简单方案，通过导入映射（Import Maps）让浏览器识别裸模块名，映射到CDN的ES模块地址：

1. 在HTML的<head>中添加导入映射：

<script type="importmap">
  {
    "imports": {
      "react": "https://unpkg.com/react@18.2.0/esm/react.js",
      "react-dom/client": "https://unpkg.com/react-dom@18.2.0/esm/react-dom/client.js"
    }
  }
</script>

2. 修改你的main.js，调整ReactDOM的导入方式（React 18的createRoot在react-dom/client模块下），并修正render的参数：

import React from "react";
import { createRoot } from "react-dom/client";

function App() {
  return React.createElement('div', {}, 
    React.createElement('h1', {}, 'Hello React ! '), 
    React.createElement('p', {}, 'Test paragraph to learn React ! ')
  );
}

const root = document.getElementById('root');
const container = createRoot(root);
container.render(React.createElement(App));

方案2：使用构建工具（正式开发推荐） #

如果是长期学习或开发项目，强烈建议用Vite、Create React App这类构建工具，它们会自动处理模块解析、JSX转译、打包优化等问题：

• Vite：执行命令初始化项目

  npm create vite@latest my-react-app -- --template react
  

  按提示安装依赖后，启动开发服务器，就能正常使用import React from 'react'这类标准导入。
• Create React App：执行命令初始化

  npx create-react-app my-react-app
  

  启动后即可直接编写React代码，无需手动处理模块路径。

方案3：直接使用node_modules中的ES模块（不推荐） #

你之前直接链接node_modules文件报错，是因为React默认的npm包是CommonJS格式，浏览器ES模块无法识别其默认导出。如果一定要用本地文件，需要导入ES模块版本：

import React from './node_modules/react/esm/react.js';
import { createRoot } from './node_modules/react-dom/esm/react-dom/client.js';

这种方式路径繁琐，部署时还要手动处理node_modules文件，仅适合临时测试，不推荐长期使用。

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