ReferenceError：Svelte 3中未定义文档

Question

我想在<script>手动document.createElement，然后到appendChild了audio一个每次eventListener被调用来取代它。一切都能在浏览器中正常运作，除了加载页面时发生的真正快速错误外，持续时间不到100ms。终端中也有错误

ReferenceError: document is not defined
    at Object (webpack:///./src/components/Record/Component.svelte?:26:17)

似乎在文档还没有准备好但后来还可以的时候调用了上面的方法，该如何解决？或者在Svelte world（Sapper）中销毁和重新创建组件的首选方法是什么？

Answer 1

Sapper 适用于您可能遇到的大多数第三方库。然而，有时，第三方库以某种方式捆绑在一起，允许它与多个不同的模块加载器一起工作。有时，此代码会创建对 window 的依赖，例如检查 window.global 是否存在。

由于在像 Sapper 那样的服务器端环境中没有窗口，因此简单地导入这样一个模块的操作可能会导致导入失败，并以错误方式终止 Sapper 的服务器，例如：

参考错误：窗口未定义

解决此问题的方法是从 onMount 函数（仅在客户端调用）内为您的组件使用动态导入，以便永远不会在服务器上调用您的导入代码。

<script>
    import { onMount } from 'svelte';

    let MyComponent;

    onMount(async () => {
        const module = await import('my-non-ssr-component');
        MyComponent = module.default;
    });
</script>

<svelte:component this={MyComponent} foo="bar"/>

Answer 2

document 未在服务器上定义，因此您需要在组件中加以防范，以使特定的代码段仅在浏览器中运行。

您可以使用onMount仅在呈现组件后才在浏览器中运行的功能。

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    document.createElement(...);

    // ...
  });
</script>