引入React useState时出现模块解析错误的技术求助

你遇到的错误核心原因是混用了两种不兼容的React引入方式：

• 通过<script>标签引入的是UMD全局版本的React，它会把React、ReactDOM挂载到浏览器的window对象上；
• 但你的JS文件使用了type="module"，尝试用ES模块语法import { useState } from 'react'导入，浏览器无法解析这种"裸模块标识符"（浏览器要求模块导入必须是相对路径、绝对路径或通过importmap映射）。

以下是两种可行的解决方案：

方案一：直接使用全局变量（适配当前CDN引入方式） #

不需要写ES模块导入语句，直接调用window上的全局变量即可，React钩子函数通过React.useXXX的方式使用：

修改后的test.js代码：

const root10 = ReactDOM.createRoot(document.getElementById('Xy'));
const element10 = <Pile />; 
root10.render(element10);

function Pile() {
  // 直接通过React.useState调用状态钩子
  const [count, setCount] = React.useState(0);
  return (
    <>
      <img
        src="https://i.imgur.com/QIrZWGIs.jpg"
        alt="Alan L. Hart"
      />
      <button onClick={() => setCount(count + 1)}>点击计数：{count}</button>
    </>
  );
}

HTML部分保持原有的UMD版本script引入即可，无需修改。

方案二：改用ES模块版本+importmap（符合现代模块规范） #

如果想继续使用ES模块的import语法，需要通过importmap给裸模块标识符映射到CDN地址，同时替换React的引入方式：

第一步：修改HTML中的脚本配置 #

<div id="Xy"></div>

<!-- 添加importmap，映射模块标识符到CDN的ES模块版本 -->
<script type="importmap">
  {
    "imports": {
      "react": "https://unpkg.com/react@18/esm/react.development.js",
      "react-dom/client": "https://unpkg.com/react-dom@18/esm/react-dom.development.js"
    }
  }
</script>

<!-- 移除原来的UMD版本script标签，只保留模块方式导入你的组件 -->
<script type="module" src="test.js"></script>

第二步：修改test.js代码 #

// 现在可以正常使用ES模块导入语法
import { useState } from 'react';
import { createRoot } from 'react-dom/client';

const root10 = createRoot(document.getElementById('Xy'));
const element10 = <Pile />; 
root10.render(element10);

function Pile() {
  const [count, setCount] = useState(0);
  return (
    <>
      <img
        src="https://i.imgur.com/QIrZWGIs.jpg"
        alt="Alan L. Hart"
      />
      <button onClick={() => setCount(count + 1)}>点击计数：{count}</button>
    </>
  );
}

注意：importmap需要Chrome 89及以上版本的浏览器支持，适合现代前端开发场景。

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