ReferenceError: документ не определен в Svelte 3

Question

Я пытаюсь в <script> вручную document.createElement, а затем appendChild и audio каждый раз, когда вызывается eventListener, чтобы заменить его. В браузере все отлично работает , кроме очень быстрой ошибки при загрузке страницы, но она длится менее 100 мс .Также в Терминале есть ошибка

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

Похоже, что выше вызывается, когда документ еще не готов, но потом все нормально, как это исправить?Или каков предпочтительный способ уничтожения и воссоздания компонентов в мире Svelte (Саппер)?

Answer 1

document не определен на сервере, поэтому вам нужно принять меры против этого в вашем компоненте, чтобы определенный фрагмент кода запускался только в браузере.

Вы можете использовать функцию onMount, которая запускается в браузере только после визуализации компонента.

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

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

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