.NET 6 MVC项目TypeScript引入SignalR遇模块解析错误

问题场景 #

在.NET 6版本的ASP.NET Core MVC项目中集成SignalR，使用TypeScript编写客户端代码时触发报错：
Uncaught TypeError: Failed to resolve module specifier "@microsoft/signalr"

已确认：

• 已通过npm安装@microsoft/signalr模块，node_modules目录下存在该包
• TypeScript文件可正常编译为JavaScript，且编译产物已在_Layout.cshtml中引用
• 使用纯JavaScript实现SignalR客户端时功能正常，但TypeScript版本无法运行

用户的TypeScript代码示例：

import * as signalR from "@microsoft/signalr";

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub")
    .configureLogging(signalR.LogLevel.Information)
    .build();

connection.start().then(() => {
    console.log("Connection established!");
}).catch((err) => {
    console.error(err.toString());
});

解决方法 #

1. 修正TypeScript配置文件（tsconfig.json） #

浏览器本身不支持Node.js的模块解析逻辑，需确保tsconfig.json配置了适配的模块解析策略：

{
  "compilerOptions": {
    "module": "ESNext",          // 输出ES模块格式
    "moduleResolution": "node",  // 采用Node风格的模块解析
    "esModuleInterop": true,     // 兼容CommonJS模块导入
    "target": "ES6",             // 目标JS版本
    "strict": true,
    "outDir": "./wwwroot/js"     // 编译产物输出目录
  }
}

2. 使用模块打包工具处理依赖 #

浏览器无法直接识别npm包的模块导入语句，需借助Webpack、Vite等打包工具，将TypeScript代码与@microsoft/signalr依赖打包为浏览器可执行的单文件：

• 配置打包工具的入口文件为你的TypeScript源码
• 引用打包生成的bundle.js文件，替代直接引用编译后的单个JS文件

3. 改用SignalR UMD全局脚本（无需打包工具） #

如果不想引入打包流程，可直接使用SignalR的UMD版本，通过全局对象调用：

1. 在_Layout.cshtml中引入UMD脚本：

   <!-- 从npm包目录直接引用，或复制到wwwroot/lib目录后引用 -->
   <script src="~/node_modules/@microsoft/signalr/dist/browser/signalr.js"></script>
   

2. 修改TypeScript代码，移除import语句：

   const connection = new signalR.HubConnectionBuilder()
       .withUrl("/hub")
       .configureLogging(signalR.LogLevel.Information)
       .build();
   
   connection.start().then(() => {
       console.log("Connection established!");
   }).catch((err) => {
       console.error(err.toString());
   });
   

3. 在tsconfig.json中添加类型声明，让TypeScript识别全局signalR对象：

   {
     "compilerOptions": {
       "types": ["@microsoft/signalr"]
     }
   }
   

4. 检查编译后的JavaScript文件 #

确认编译后的JS文件是否保留了import * as signalR from "@microsoft/signalr";语句。如果是，浏览器无法解析该导入，需通过上述1/2/3方法处理。

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