BUG: importing daily.co in React with esBuild gives "Uncaught ReferenceError: global is not defined"

[iamwilhelm]

Expected behavior

While using esBuild, I expect to add:

import DailyIframe from "@daily-co/daily-js"

without a problem

Describe the bug (unexpected behavior)

esBuild succeeds in building the react app, but when loading in the browser, yields "Uncaught ReferenceError: global is not defined" in the console.

Steps to reproduce

The solution is to define global=window in esBuild's build configs.

https://esbuild.github.io/api/#define

In a build script:

esbuild.build({
  ...other build configs
  define: {
    global: "window"
  }
})

in the command line, add --define:global=window

Action to take

Mention this in the https://docs.daily.co/reference#using-the-dailyco-front-end-library

under the section for "Bundling with webpack and other tools"

[kachar]

I got the same problem when using Vite

In order to resolve it I had to add the following to vite.config.ts:

export default defineConfig({
  define: {
    global: 'window',
  },
})

More info can be found at https://vitejs.dev/config/#define

[jmordica]

I got the same problem when using Vite

In order to resolve it I had to add the following to vite.config.ts:

export default defineConfig({
  define: {
    global: 'window',
  },
})

More info can be found at https://vitejs.dev/config/#define

This resolved the issue for me as well using Vite

[rememberlenny]

Also hit this.

[aamiriqubal]

Please use 'esbuild-plugin-polyfill-node' plugin.
https://npm.io/package/esbuild-plugin-polyfill-node

plugins: [
    polyfillNode({
    }),
]

This solved the problem for me.