Stencil js集成Azure Service Bus报错：TypeError: Cannot read properties of undefined (reading 'nextTick')

问题核心 #

你遇到的TypeError: Cannot read properties of undefined (reading 'nextTick')错误，本质是浏览器环境缺少Node.js核心API的Polyfill，同时@azure/service-bus默认依赖Node.js的网络传输模块，在浏览器环境无法直接运行——纯Node.js环境能正常工作也验证了这一点。

分步解决方案 #

1. 调整依赖与Polyfill配置 #

rollup-plugin-node-polyfills版本较老，对Webpack 5的支持不完善，建议替换为更适配的Polyfill工具，同时补充缺失的Node核心模块：

安装必要依赖

npm install process buffer util events stream-browserify @esbuild-plugins/node-globals-polyfill --save-dev

修改stencil.conf.js配置

import { Config } from '@stencil/core';
import webpack from 'webpack';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';

export const config: Config = {
  namespace: 'provaprovaprova',
  plugins: [
    // 合并ProvidePlugin配置，显式注入process和Buffer
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
      'process.nextTick': 'process/browser'
    })
  ],
  nodeResolve: {
    extensions: ['.ts', '.js', '.tsx'],
    module: true,
    browser: true // 优先加载模块的浏览器兼容版本
  },
  rollupPlugins: {
    before: [
      // 替换老的Node Polyfill插件
      NodeGlobalsPolyfillPlugin({
        process: true,
        buffer: true
      })
    ]
  },
  webpackFinal: (config) => {
    // 给Webpack添加Node核心模块的fallback配置
    config.resolve.fallback = {
      ...config.resolve.fallback,
      util: require.resolve('util/'),
      events: require.resolve('events/'),
      stream: require.resolve('stream-browserify/'),
      // 浏览器环境不需要的Node网络模块禁用
      net: false,
      tls: false
    };
    return config;
  }
};

2. 调整Service Bus客户端的传输方式 #

@azure/service-bus默认用TCP传输，浏览器环境不支持，需要强制使用WebSocket：

async componentDidLoad() { // 建议用componentDidLoad替代componentWillRender，避免重复执行
  try {
    // 初始化客户端时指定WebSocket传输
    const serviceBusClient = new asb.ServiceBusClient(this.connectionString, {
      transport: {
        type: 'webSocket',
        webSocketOptions: {
          webSocket: WebSocket
        }
      }
    });

    const sender = serviceBusClient.createSender(this.queueName);
    await sender.sendMessages({ body: "prova prova" });
    console.log('消息发送成功');

    // 及时关闭资源，避免内存泄漏
    await sender.close();
    await serviceBusClient.close();
  } catch (err) {
    console.error('消息发送失败:', err);
  }
}

render() {
  return <div></div>;
}

3. 额外注意事项 #

• 避免重复创建客户端：componentWillRender会在组件每次渲染前执行，容易重复创建ServiceBusClient，改用componentDidLoad只执行一次。
• 环境变量验证：确保this.connectionString和this.queueName已正确从dotenv加载，可通过console.log确认值是否正确。
• 资源清理：每次发送完成后必须关闭sender和client，避免连接泄漏。

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