Importing "@daily-co/daily-js" into SvelteKit app throws "global is not defined" error

Question

What I tried:

1. I tried work around it via if (browser), more specifically{ if (!browser) { let DailyIframe = await import('daily-co/daily-js) } in the load function inside <script context="module"> ) so the code is always executed on the server). Then pass it as a prop to a component. However, although it worked on the server, the local dev environment re-runs the load function (which has to return an empty prop as it never imported anything) and overrides DailyIframe's value (might be a bug with Vite/SvelteKit).

2. I tried to import the library in an end-point e.g. api.json.js instead, which is always executed on the server. However, it has to return a json, and I can't pass an entire library variable onto it.

After research It seems like a combination of problems from Vite, SvelteKit and certain libraries where global is undefined: SvelteKit With MongoDB ReferenceError: global is not defined)

But I cannot use his solution of putting it in an endpoint, because I need the DailyIframe and the mic audio stream from the client to create a video conference room

Also, why would certain libraries Daily (and looking at other related Stackoverflow posts, MongoDB) throw this error in the first place, while other libraries are safe to use?

Anyway suggestion is appreciated!

Answer 1

Why ?

Vite doesn't include shims for Node builtins variables.

Read suggestion to understand:

• https://github.com/vitejs/vite/issues/728
• https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814

Anyway suggestion is appreciated!

In index.html add :

<script>
  var global = global || window;
</script>

then for example in App.svelte :

<script>
import { onMount } from 'svelte'
import DailyIframe from '@daily-co/daily-js'
    
onMount(async () => {
  let callObject = DailyIframe.createFrame()
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
  let recorder = new MediaRecorder(stream)
  recorder.start()
})
</script>

Demo

https://stackblitz.com/edit/sveltekit-1yn6pz?devtoolsheight=33

logs preview