ASP.NET Core集成TypeScript React报错无法解析模块specifier "react"

• 你在Razor页面中使用了浏览器原生ES模块（script标签设置了type="module"），原生ES模块规范不支持裸模块导入，也就是代码中import * as React from 'react'这种不带/、./、../前缀的导入写法，浏览器无法直接解析到对应资源的实际路径。
• ASP.NET Core默认仅开放wwwroot作为静态文件访问根目录，与wwwroot同级的node_modules目录不会被暴露，就算浏览器可以解析裸导入，也无法访问到node_modules下的依赖文件。
• 你当前的TypeScript配置仅完成了TS语法转译、JSX编译和输出路径指定，没有做模块打包处理，编译后的JS代码仍然保留了原始的裸导入语句，放到浏览器运行自然会抛出对应错误。

下面提供两种适配ASP.NET Core场景的可行方案，你可以根据项目规模选择：

方案1：使用模块打包工具（推荐中长期项目使用） #

通过打包工具自动处理所有模块依赖，把React、React-Dom和你的业务代码打包为可直接被浏览器加载的成品JS文件，不需要依赖node_modules目录暴露：

1. 选择Vite作为打包工具，项目根目录执行安装命令：npm install -D vite @vitejs/plugin-react
2. 项目根目录新增vite.config.ts配置文件，内容如下：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    // 指定打包输出目录为wwwroot下的dist文件夹
    outDir: '../wwwroot/dist',
    rollupOptions: {
      // 配置入口文件为你的Form.tsx，路径根据你实际的TSX存放位置调整
      input: './src/Builder/Form.tsx'
    }
  }
})

3. 在package.json中新增编译脚本：

{
  "scripts": {
    "build": "tsc && vite build",
    "dev": "vite"
  }
}

4. 执行npm run build即可把所有代码打包输出到wwwroot/dist目录，修改Razor页面引用打包后的文件即可：

<script src="/dist/Form.js"></script>

方案2：配置Importmap适配裸导入（适合小型Demo快速调试） #

如果不想引入打包工具，可以通过浏览器原生Importmap特性给裸导入指定本地资源路径，不需要修改业务代码：

1. 从node_modules/react/umd和node_modules/react-dom/umd目录下，把react.production.min.js、react-dom.production.min.js两个文件复制到wwwroot/lib目录下。
2. 在Razor页面引入你的业务JS之前，添加Importmap配置：

<script type="importmap">
{
  "imports": {
    "react": "/lib/react.production.min.js",
    "react-dom": "/lib/react-dom.production.min.js"
  }
}
</script>
<script type="module" src="/js/Builder/Form.js"></script>

配置完成后浏览器就能正确解析裸导入语句，报错即可解决。

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