DEV Community

Abdullah Bashir
Abdullah Bashir

Posted on

3 1 1 1 1

Make EditorJS work in Svelte(kit) SSR

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
Enter fullscreen mode Exit fullscreen mode

Here's how I solved it:

  1. Load Editor Asynchronously: Ensure the editor loads only on the client side using onMount to avoid SSR complications.

  2. Element Initialization: Bind elements properly and handle initialization using onMount to ensure the element is available after component setup.

  3. 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>
view raw Editorjs.svelte hosted with ❤ by GitHub

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay