使用@azure/event-hubs向EventHub发送事件时出现错误

问题 #

我正在使用Angular 19和TypeScript从浏览器向EventHub发送事件，未使用服务端Node.js，使用的npm包为@azure/event-hubs，导入语句为：

import {EventHubProducerClient} from '@azure/event-hubs';

应用启动后立即出现错误：

browser-external:util:9 Module "util" has been externalized for browser compatibility. Cannot access "util.inherits" in client code.

请问如何修复该错误？是否应使用其他TypeScript npm包？

解决方案 #

• 使用浏览器专属的Azure Event Hub包
  @azure/event-hubs是为Node.js环境设计的，依赖Node.js原生模块（比如util），不适用于浏览器场景。你应该替换为微软官方提供的浏览器兼容包@azure/event-hubs-browser：

  1. 安装包：

     npm install @azure/event-hubs-browser
     

  2. 修改导入语句：

     import { EventHubProducerClient } from '@azure/event-hubs-browser';
     

  这个包已经移除了Node.js专属依赖，直接适配浏览器环境，是官方推荐的浏览器端解决方案。

• 若坚持使用@azure/event-hubs（不推荐）
  可以通过添加polyfill并配置Vite来解决依赖问题：

  1. 安装util的polyfill：

     npm install util-browserify
     

  2. 在vite.config.ts中添加别名配置，将util指向polyfill：

     import { defineConfig } from 'vite';
     import angular from '@vitejs/plugin-angular';
     
     export default defineConfig({
       plugins: [angular()],
       resolve: {
         alias: {
           'util': 'util-browserify'
         }
       }
     });
     

  不过这种方式可能会引入更多兼容问题，不如直接使用官方的浏览器包稳定。

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