Issue with Sveltekit (and possibly with hmr)

[SomeMinecraftModder]

Describe the bug

When using the Editor in SvelteKit, it error out with

self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (/home/emilien/js stuffs/Website2000/node_modules/@toast-ui/editor/dist/toastui-editor.js:16:4)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async nodeImport (file:///home/emilien/js%20stuffs/Website2000/node_modules/vite/dist/node/chunks/dep-0f13c890.js:50572:21)
10:45:53 [vite] page reload src/lib/editor.svelte (x2)
self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (/home/emilien/js stuffs/Website2000/node_modules/@toast-ui/editor/dist/toastui-editor.js:16:4)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at async nodeImport (file:///home/emilien/js%20stuffs/Website2000/node_modules/vite/dist/node/chunks/dep-0f13c890.js:50572:21)

But when I comment the import line and the Editor creation line (the const editor = new Editor), for some reason it work until I change some code, then it error out with the same error as above.

Here is my code

<script lang="ts">
    import Editor from '@toast-ui/editor';
    import '@toast-ui/editor/dist/toastui-editor.css';
    import { onMount } from 'svelte';

    let el: HTMLDivElement;
    onMount(() => {
        const editor = new Editor({
            el: el,
            height: '20rem',
            initialEditType: 'wysiwyg',
            previewStyle: 'vertical',
            usageStatistics: false
        });
        editor.focus( )
    });
</script>

<div bind:this={el} />

To Reproduce

Steps to reproduce the behavior:

1. Create new SvelteKit project
2. Create new component with the code as above
3. Change some code
4. Profit

Expected behavior

I would like that if it would not error out.

Desktop (please complete the following information):

• OS: Linux, Fedora 35
• Browser Firefox, latest version
• Version latest version of Editor

Additional context

Looks like it's hmr (hot module reload) that doesn't play well with the Editor.

[ValeriaVG]

I was able to solve it with:

        import type Editor from '@toast-ui/editor';
    let editor: Editor;
    let el: HTMLDivElement;
    onMount(async () => {
        const tui = await import('@toast-ui/editor');
        editor = new tui.Editor({
            el,
            height: '20rem',
            initialEditType: 'wysiwyg',
            previewStyle: 'vertical',
            usageStatistics: false
        });
    });

The trick is to:

• Import only the type for TS
• Dynamically import editor onMount to avoid SSR issues

[SomeMinecraftModder]

Thanks you, it worked !