Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot import EditorJs in sapper project

See original GitHub issue


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.
  import EditorJs from '@editorjs/editorjs';
</script> 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.


Screenshot from 2020-05-03 19-54-51 …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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

Schidstercommented, May 4, 2020

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.

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

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

georgeciubotarucommented, Apr 21, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Editor.JS SyntaxError: Cannot use import statement outside a ...
I am trying to install editor.js into my project, however, I keep running into the error Uncaught SyntaxError: Cannot use import statement ...
Read more >
How can I install the Editor.js module in my Glitch project?
0 I'm trying to install Editor.js using node.js package in my hello-express Glitch ... Uncaught SyntaxError: Cannot use import statement outside a module....
Read more >
FAQs - CodeSandbox
There are a few possible reasons a repo might throw that error on import. The most common are either a lack of a...
Read more >
Experts for omit lodash - Linknovate
Name Score News GitHub 85.1 8 Dave Gibbons Ltd. 68.8 3 Conflict Resolution 54.2 2
Read more >
Technological monitoring for web developers - The whale
The only favicon generator you need for your next project. ... editor.js ... Node.js Runtime API - Import your Snowpack-built files directly into...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found