If you're here, you've probably been having issues using EditorJs in Sveltekit (like me). Since SSR isn't supported in EditorJs (see discussion), you might encounter errors like this:
[vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "@editorjs/editorjs"
|- ReferenceError: Element is not defined
Here's how I solved it:
Load Editor Asynchronously: Ensure the editor loads only on the client side using
onMountto avoid SSR complications.Element Initialization: Bind elements properly and handle initialization using
onMountto ensure the element is available after component setup.-
Be Sure To Import EditorJs Correctly (since it's a default export):
- Default Import:
const { default: EditorJs } = ...
-
Destructuring Import:
const Editor = ... const EditorJs = Editor.default
Here's the full solution:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| import {onMount} from "svelte"; | |
| /** | |
| * @type {EditorJS | null} | |
| */ | |
| let editor = $state(null); | |
| /** @type {HTMLElement | null} */ | |
| let editorEl = null; | |
| onMount(async () => { | |
| try { | |
| const {default: EditorJS} = await import('@editorjs/editorjs'); | |
| const {default: Header} = await import("@editorjs/header") | |
| editor = new EditorJS({ | |
| holder: editorEl, | |
| tools: { | |
| header: { | |
| class: Header, | |
| inlineToolbar: ['link'] | |
| }, | |
| } | |
| }); | |
| } catch (error) { | |
| console.error("Failed to load EditorJS:", error); | |
| } | |
| }); | |
| let props = $props() | |
| </script> | |
| <div bind:this={editorEl} class="w-full h-full {props.class}"></div> |
Happy Hacking!
PS: If you're using Svelte 4, remember to change the Svelte-5-specific syntax. I'd advise you to switch as soon as possible tho.
Top comments (0)