Make EditorJS work in Svelte(kit) SSR

Here's a refined version of your post:

---

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:

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:

Happy Hacking!