在RazorPages中使用SignalR遇模块解析错误求助

出现Uncaught (in promise) Error: Unable to resolve bare specifier '@microsoft/signalr'错误的核心原因是：浏览器原生不支持直接解析裸模块标识符（即不带相对/绝对路径的模块名），可通过以下几种方式处理：

方法一：使用导入映射（Import Maps） #

这是无需打包的轻量方案，直接在HTML中配置模块映射关系：

1. 在页面的<head>标签内添加导入映射脚本：

<script type="importmap">
  {
    "imports": {
      "@microsoft/signalr": "https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"
    }
  }
</script>

2. 确保TypeScript编译后的JS文件使用ES模块格式（tsconfig.json中module设为ESNext或ES6），页面引入脚本时加上type="module"：

<script type="module" src="~/scripts/index.js"></script>

之后原有的import * as signalR from "@microsoft/signalr";就能正常被浏览器解析。

方法二：使用模块打包工具（Webpack/Vite） #

如果项目存在多模块依赖，推荐用打包工具将所有模块合并为浏览器可识别的文件：

以Webpack为例： #

1. 安装依赖：

npm install @microsoft/signalr --save
npm install webpack webpack-cli typescript ts-loader --save-dev

2. 配置webpack.config.js：

module.exports = {
  entry: './scripts/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/wwwroot/scripts',
  },
};

3. 调整tsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "outDir": "./wwwroot/scripts",
    "strict": true,
    "esModuleInterop": true
  }
}

4. 执行打包命令：

npx webpack --mode production

5. 在页面中引入打包后的文件：

<script src="~/scripts/bundle.js"></script>

方法三：全局变量方式 #

跳过模块导入，直接使用全局变量：

1. 在页面中引入SignalR的CDN脚本：

<script src="https://cdn.jsdelivr.net/npm/@microsoft/signalr@latest/dist/browser/signalr.min.js"></script>

2. 在TypeScript中声明全局变量（避免类型报错）：

declare var signalR: typeof import("@microsoft/signalr");

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub")
    .withAutomaticReconnect()
    .build();

之后即可直接使用signalR对象。

额外检查 #

确保你的ASP.NET Core项目已正确配置SignalR路由：

// Program.cs
app.MapHub<YourHubClass>("/hub");

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