Cannot import EditorJs in sapper project

[Schidster]

Description

Importing EditorJs from '@editorjs/editorjs' after installing npm package results development server crash. It also sometimes said that maximum call stack exceeded. Also tried building the project and serving with node. That to failed. However it works with standalone svelte project.

Steps to reproduce:

1. Run the following commands.

   foo@bar:~$ npx degit "sveltejs/sapper-template#rollup" my-app
   foo@bar:~$ cd $_
   foo@bar:~$ npm i && npm i @editorjs/editorjs --save-dev
   foo@bar:~$ npm run dev

   Now you should see sapper running in port 3000.

2. Now add the following to ~/my-app/src/routes/index.svelte in the top.

   
   <script>
   import EditorJs from '@editorjs/editorjs';
   </script>

...rest of the stuff.

3. Make sure sapper is running and see you console.
> Now you should see your console filled with editorjs source code and at last it says server crashed.
# Expected behavior:
Get imported as a good boy.

# Screenshots:
![Screenshot from 2020-05-03 19-54-51](https://user-images.githubusercontent.com/56686094/80917067-4ddbd300-8d7a-11ea-9c35-850dfce53622.png)
...and the rest of the source code with tailing error of **server crashed**.
# Device, Browser, OS:
- **Device**: Acer aspire 3
- **Browser**: Chrome - latest
- **Node**: v12.16.2
- **package.json**:
```json
{
  "name": "TODO",
  "description": "TODO",
  "version": "0.0.1",
  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run"
  },
  "dependencies": {
    "compression": "^1.7.1",
    "cypress": "^4.5.0",
    "polka": "next",
    "sirv": "^0.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@editorjs/editorjs": "^2.17.0",
    "@rollup/plugin-commonjs": "11.0.2",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "@rollup/plugin-replace": "^2.2.0",
    "npm-run-all": "^4.1.5",
    "rollup": "^1.20.0",
    "rollup-plugin-babel": "^4.0.2",
    "rollup-plugin-svelte": "^5.0.1",
    "rollup-plugin-terser": "^5.3.0",
    "sapper": "^0.27.0",
    "svelte": "^3.0.0"
  }
}

Editor.js version:

• see in package.json I am beginner. Dont get me wrong if i was too silly and also this is my first issue. Glad I can contribute to you guys.

[Schidster]

I tried sapper-template#webpack too. Same case. Same error.

[Schidster]

Sorry the problem was with me. As Sapper uses ssr, importing it in server side caused problems like these. I instead used dynamic imports like below as recomended in the official documentation.

<script>
  import { onMount } from 'svelte';
  onMount(async () => {
    const editorjs = await import ('@editorjs/editorjs');
    const EditorJs = editorjs.default;
    let editor = new EditorJs({
        /* ...configurations */
    });
  /* ...rest of the stuff */
</script>

Hope this would be helpful for anyone using editorjs in ssr environment. I am closing this issue.

[DanSivewright]

How did you go about getting the tool plugins to work? I followed your implementation. <script> import { onMount } from 'svelte' onMount(async () => { const editorjs = await import('@editorjs/editorjs') const Header = await import('@editorjs/header') const List = await import('@editorjs/list') const EditorJs = editorjs.default let editor = new EditorJs({ holder: 'editorjs', tools: { header: { class: Header, inlineToolbar: ['link'], }, list: { class: List, inlineToolbar: true, }, }, }) }) </script>

I receive an error in my console that says the following.

Would you mind sharing your implementation of tools?

[Schidster]

Sorry man. Its been a year since I touched programming, I dont remember anything about it. I was a naive programmer then, if I figured it out, u too can. All the best with your project. Bye :)

On Fri, Feb 26, 2021, 7:04 PM Dan Sivewright notifications@github.com wrote:

How did you go about getting the tool plugins to work? I followed your implementation.

I receive an error in my console that says the following. [image: Screenshot 2021-02-26 at 15 34 06] https://user-images.githubusercontent.com/61431543/109306613-1463df00-7848-11eb-88f3-c79afc935c1e.png

Would you mind sharing your implementation of tools?

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/codex-team/editor.js/issues/1142#issuecomment-786651054, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANQPMDQZSKDHDERHNFVRNK3TA6PQBANCNFSM4MYE5DSA .

[georgeciubotaru]

@DanSivewright If you still have that problem, you can follow my example