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
onMount
to avoid SSR complications.Element Initialization: Bind elements properly and handle initialization using
onMount
to 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:
<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)