Parse error from 2.27.0 up

[netpalantir]

Hello, I have been trying to add Editorjs to my Webpack 4 project, but unfortunately it does work only up to version 2.26.5.

As soon as I upgrade to 2.27.0 and up I get the following error (this one is obtained running @editorjs/[email protected])

ERROR in ./node_modules/@editorjs/editorjs/dist/editorjs.mjs 2922:7
Module parse failed: Unexpected token (2922:7)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       return;
|     }
>     e ?? !this.Editor.BlockSettings.opened ? (this.Editor.Toolbar.moveAndOpen(), this.Editor.BlockSettings.open()) : this.Editor.BlockSettings.close();
|   }
|   /**

Is there some incompatibility with my toolchain? How can I help fix/debug this? Thanks.

[mattialerda]

I have the same issue!

[neSpecc]

I think, your babel-loader should not process node_modules. Do you have the ignore option specified in babel config? It could override the default behaviour

[Real-Music]

I have the same issue!

[dzantiev]

try to add this to webpack config rules: [{ test: /\.mjs$/, use: 'esbuild-loader' }],

[phigoro]

If you are using Nuxt 2:

1. npm install esbuild-loader --save-dev
2. Modify nuxt.config.js

build: {
    extend(config, { isDev, isClient }) {
      if (isClient) {
        config.module.rules.push({
          test: /\.mjs$/,
          include: /node_modules/,
          use: [
            {
              loader: 'esbuild-loader',
              options: {
                loader: 'jsx',  // if you're using JSX
                target: 'es2017' // set this to your desired ECMAScript version
              }
            }
          ]
        });
      }
    }
  }

[sagarsangwan]

rules: [{ test: /.mjs$/, use: 'esbuild-loader' }],

Bro, where to put this line exactly

[melvinprindustry]

If you are using Nuxt 2:

1. npm install esbuild-loader --save-dev
2. Modify nuxt.config.js

build: {
    extend(config, { isDev, isClient }) {
      if (isClient) {
        config.module.rules.push({
          test: /\.mjs$/,
          include: /node_modules/,
          use: [
            {
              loader: 'esbuild-loader',
              options: {
                loader: 'jsx',  // if you're using JSX
                target: 'es2017' // set this to your desired ECMAScript version
              }
            }
          ]
        });
      }
    }
  }

If after this you receive the "Element not defined" error, try importing editorJS in the mounted() lifecycle:

    mounted() {
        import('@editorjs/editorjs').then(module => {
        const EditorJS = module.default;
        this.editor = new EditorJS({
            holder: 'editor'
        });
        }).catch(err => {
            console.error('Failed to load module:', err);
        });
    }