@azure/service-bus Vite.js polyfill example

[mdiflorio]

Is your feature request related to a problem? Please describe. Yes, I've been struggling to get @azure/service-bus working with Vite.js with different polyfill options.

These are some of the things I have tried:

1. Official documentation using rollup options seems to give util errors.
2. @esbuild-plugins/node-globals-polyfill doesn't throw any errors but only start up messages are received, I can't receive any messages after that. Using the debug modes for rhea doesn't show any errors.
3. esbuild-plugin-polyfill-node works. I can receive messages however I get errors such as The injected path "/node_modules/esbuild-plugin-polyfill-node/polyfills/__dirname.js" cannot be marked as external when running npm run dev. This is unresolved in the package

Describe the solution you'd like An example repo or documentation with Vite.js and polyfills added.

Describe alternatives you've considered A supported polyfill package from Azure

[github-actions[bot]]

Thanks for the feedback! We are routing this to the appropriate team for follow-up. cc @EldertGrootenboer.

[mdiflorio]

For clarity, this is the only way I've gotten it to work

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { polyfillNode } from 'esbuild-plugin-polyfill-node';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: 'globalThis',
      },
      // Enable esbuild polyfill plugins
      plugins: [polyfillNode()],
    },
  },
});

But my development environment has these errors:

✘ [ERROR] The injected path "node_modules/esbuild-plugin-polyfill-node/polyfills/process.js" cannot be marked as external

✘ [ERROR] The injected path "node_modules/esbuild-plugin-polyfill-node/polyfills/__dirname.js" cannot be marked as external

✘ [ERROR] The injected path "esbuild-plugin-polyfill-node/polyfills/buffer.js" cannot be marked as external

[mpodwysocki]

@mdiflorio You could do what we do for the @azure/core-amqp project and use vite-plugin-node-polyfills such as we do for the browser.

import { defineConfig } from "vitest/config";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [nodePolyfills()],
  // Rest of config
});

[mdiflorio]

Thanks @mpodwysocki!

I managed to get it all working using vite-plugin-node-polyfills.

Initially I had a similar issue with messages not coming through, but debugging using export DEBUG=azure*,rhea* I could see that the polyfill for process.nextTick was missing.

Using the package next-tick and adding this to my main.tsx file fixed it :)

// Polyfill for @azure/service-bus as vite-plugin-node-polyfills doesn't include it
import nextTick from 'next-tick';
process.nextTick = nextTick;

[github-actions[bot]]

Hi @mdiflorio. Thank you for opening this issue and giving us the opportunity to assist. We believe that this has been addressed. If you feel that further discussion is needed, please add a comment with the text "/unresolve" to remove the "issue-addressed" label and continue the conversation.