将“@daily co/daily js”导入SvelteKit应用程序引发“全局未定义”错误

Question

我尝试了什么：

1. --我尝试通过if (browser) (更具体地说，在<script context="module">中加载函数中的{ if (!browser) { let DailyIframe = await import('daily-co/daily-js) } )来完成它，因此代码总是在服务器上执行)。然后把它作为道具传递给组件。但是，尽管本地dev环境在服务器上工作，但它重新运行load函数(因为它从未导入任何内容，因此必须返回一个空的支柱)，并重写DailyIframe的值(可能是Vite/SvelteKit).

中的一个bug )。

1. I尝试在端点导入库，例如api.json.js，它总是在服务器上执行。但是，它必须返回一个json，而且我不能将整个库变量传递给它。

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

但是我不能使用他的解决方案把它放在端点，因为我需要DailyIframe和来自客户端的麦克风音频流来创建一个视频会议室。

另外，为什么某些类库日报(以及查看其他相关的堆栈溢出帖子，MongoDB)会首先抛出这个错误，而其他库则可以安全地使用？

无论如何，建议是非常感谢的！

Answer 1

为什么？

Vite不包括Node变量的shims。

阅读建议以了解：

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

无论如何，

的建议是非常感谢的！

在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

日志预览

​

​