Cannot import EditorJs in sapper project

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.

1. 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.

1. 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:

…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:

{
  "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]

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.

[georgeciubotaru]

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