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 世界 (Sapper) 中销毁和重新创建组件的首选方法是什么？

Answer 1

感谢Rutuja's answer here，我也能够让我的应用程序正常工作。添加到 Rutuja 的答案中，如果有人在使用 Sapper + Svelte + 另一个包（在我的情况下为 theme.js）时遇到此问题，您可能还需要导入多个组件。这在Mozilla's documentation here for import 中有描述。

当使用动态导入导入默认导出时，它会起作用 不同。您需要解构并重命名“默认”键 返回的对象。

(async () => {
  if (somethingIsTrue) {
    const { default: myDefault, foo, bar } = await import('/modules/my-module.js');
  }
})();

对于我自己的项目（使用theme.js），我必须使用以下逻辑（基于位于here 的theme.js 的精简示例）：

const themeState = {
    active: undefined,
    selected: undefined,
    themes: [],
}

onMount(async () => {
    const { default: Themer, auto, system } = await import('themer.js')

    themeState = {
        active: undefined,
        selected: light,
        themes: [light, dark, auto, system],
    }

    const themer = new Themer({
        debug: true,
        onUpdate: (theme) => (themeState.active = theme),
        themes: { light, dark, auto, system },
    })

    function noThemeSupport({ theme }) {
        return theme === 'system' && !themer.themeSupportCheck()
    }

    function setTheme(theme) {
        themeState.selected = theme
        themer.set(theme)
    }

    themer.set(themeState.selected)
})

Answer 2

Sapper 可以很好地与您可能遇到的大多数第三方库配合使用。但是，有时，第三方库的捆绑方式允许它与多个不同的模块加载器一起工作。有时，这段代码会创建对 window 的依赖，例如检查 window.global 是否存在。

由于像 Sapper 的服务器端环境中没有窗口，简单地导入这样一个模块的动作可能会导致导入失败，并终止 Sapper 的服务器并出现如下错误：

ReferenceError: 未定义窗口

解决此问题的方法是从 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 3

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

您可以使用onMount 函数，该函数仅在组件渲染后在浏览器中运行。

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

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

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