Express+TypeScript项目引入React时模块解析失败问题

浏览器原生ES模块不支持“裸模块标识符”（比如import React from "react"这种写法），它只认以/、./或../开头的相对/绝对路径引用。你把node_modules设为静态目录没用，因为TypeScript编译后输出的代码里依然保留了裸导入语句，浏览器完全不知道react对应哪个文件路径。

下面提供三种适合无打包工具场景的解决方法，按推荐程度排序：

方法一：使用Import Maps（推荐，现代浏览器支持） #

这是W3C标准的解决方案，能让浏览器识别裸模块导入：

1. 在reactPractice.html的<head>里添加importmap脚本，把裸模块映射到node_modules里的实际文件路径：

   <script type="importmap">
   {
     "imports": {
       "react": "/react/index.js",
       "react-dom/client": "/react-dom/client.js"
     }
   }
   </script>
   

   （注：路径对应node_modules里的文件，可查看react/package.json的module字段确认入口文件）
2. 不需要修改你的TypeScript代码，原来的import React from "react"和import { createRoot } from "react-dom/client"可以直接保留，浏览器会通过import map自动解析到正确的文件。

方法二：HTML预加载UMD模块，使用全局变量 #

适合需要兼容旧浏览器的场景：

1. 在reactPractice.html的<body>开头添加React和ReactDOM的UMD开发版脚本：

   <script src="/react/umd/react.development.js"></script>
   <script src="/react-dom/umd/react-dom.development.js"></script>
   

   （因为你已经把node_modules设为静态目录，/react/...会直接指向node_modules/react下的文件）
2. 修改tsconfig.json的compilerOptions，让TypeScript识别全局的React变量：

   {
     "compilerOptions": {
       // ... 其他配置
       "allowUmdGlobalAccess": true
     }
   }
   

3. 去掉helpInsertReact.tsx里的import语句，直接使用全局变量：

   export default function insertReact() {
       console.log("insertReact");
       let rootDiv: HTMLElement = document.getElementById("root")!;
       const root = ReactDOM.createRoot(rootDiv);
       // 示例：渲染一个简单组件
       root.render(
           <React.StrictMode>
               <h2>Hello React!</h2>
           </React.StrictMode>
       );
   }
   

方法三：直接使用相对路径导入模块 #

这种方法最直接，但路径维护麻烦：
修改helpInsertReact.tsx里的import语句，换成相对于编译后JS文件的路径（编译后的文件在public/out，所以要回退到node_modules）：

import React from "../../node_modules/react/index.js";
import { createRoot } from "../../node_modules/react-dom/client.js";

注意：如果TypeScript报类型错误，确保@types/react和@types/react-dom已经正确安装，且tsconfig的include包含了相关类型文件。

• TypeScript的moduleResolution: node是给Node.js环境设计的，浏览器原生模块不遵循Node的模块解析规则，所以编译后的裸导入语句在浏览器里无法直接工作。
• 你提到编译后的helpInsertReact.js没出现在Sources标签，是因为浏览器在解析模块时遇到错误，中断了后续代码加载，所以不会显示该文件。

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