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:
     
   
   
   
   
   CODE Kopieren

    const { default: EditorJs } = ...
   
   

   
   
   

• 
  

  Destructuring Import:
  
  

  
  
  CODE Kopieren

   const Editor = ...
  
  const EditorJs = Editor.default
  
  

  
  
  

Here's the full solution:

Happy Hacking!