javascript - 将 "@daily-co/daily-js"导入 SvelteKit 应用程序会引发 "global is not defined"错误

Question

我尝试过的:

1. 我尝试通过 if (browser) 解决这个问题， 进一步来说{ if (!browser) { let DailyIframe = await import('daily-co/daily-js) }在load函数里面<script context="module"> )因此代码始终在服务器上执行)。然后将其作为 prop 传递给组件。然而，虽然它在服务器上工作，但本地开发环境重新运行加载函数(它必须返回一个空 Prop ，因为它从未导入任何东西)并覆盖 DailyIframe 的值(可能是 Vite/SvelteKit 的错误)。

2. 我尝试在端点导入库，例如api.json.js相反，它总是在服务器上执行。但是，它必须返回一个 json，并且我无法将整个库变量传递给它。

研究后 这似乎是 Vite、SvelteKit 和某些库的问题的组合，其中 global未定义:SvelteKit With MongoDB ReferenceError: global is not defined )

但我无法使用他将其放入端点的解决方案，因为我需要来自客户端的 DailyIframe 和麦克风音频流来创建视频 session 室

此外，为什么某些库 Daily(并查看其他相关的 Stackoverflow 帖子、MongoDB)会首先抛出此错误，而其他库可以安全使用？

无论如何，建议表示赞赏!

Answer 1

Why ?

Vite 不包含 Node 内置变量的垫片。

阅读建议以了解:

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

Anyway suggestion is appreciated!

在index.html中添加:

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

然后例如在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>

演示

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

logs preview