Can't import the named export 'Extension' from non EcmaScript module

[sarah2627]

What’s the bug you are facing?

Since the last update of tiptap, we encounter an error of the type :

error  in ./node_modules/@tiptap/extension-floating-menu/dist/tiptap-extension-floating-menu.mjs

Can't import the named export 'Extension' from non EcmaScript module (only default export is available)

This error seems to be caused by the latest release of Tiptap. We have tried to modify the different versions with "@tiptap/vue-2": "2.0.0-beta.79", "@tiptap/vue-2": "2.0.0-beta.203" and "@tiptap/core": "2.0.0-beta.160", "@tiptap/core": "2.0.0-beta.193", "@tiptap/core": "2.0.0-beta.203"

Which browser was this experienced in? Are any special extensions installed?

Mozilla Firefox 107.0 or Chrome 107.0.5304.110

How can we reproduce the bug on our side?

• create a Vue2 project
• install Tiptap

Can you provide a CodeSandbox?

No response

What did you expect to happen?

It works

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[bdbch]

Thanks, I'm looking into it.

[bdbch]

@sarah2627 how did you create your vue 2 project? I've setup a sandbox to test this but it seems to work with Vite: https://codesandbox.io/s/bold-glitter-njq8cr?file=/src/components/Editor.vue

Are you using the Vue CLI? What kind of bundler is in use?

[bdbch]

I also tried to use the latest Tiptap version with @vue/cli using Webpack and had no issues there. Could you give me a few more infos about how you setup your project and what your code looks like? Ideally with a codesandbox?

You can use this template:
https://codesandbox.io/s/tiptap-vue-2-8hwyxr

[Anders2303]

Also ran into this issue, in a project using Nuxt v2 with webpack (node v14 if that matters). I'm unsure which webpack version nuxt2 is running, but looking at the @nuxt/webpack packages I believe it's 4.46.0. Seems to be an issue

Following the discussion here, adding the following rule to my nuxt's webpack config resolved the issue for me:

// nuxt.config.js
build: {
    // ...

    extend(config, ctx) {
      // ...

      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      })
    },
  },

[bdbch]

Thanks for the information. I'll try to replicate the problem with Nuxt.

[bdbch]

@Anders2303 I found a solution. Since we renamed files to for example index.cjs or index.mjs some webpack configurations may load mjs files without knowing that it's using EcmaScript.

What helped for me here is adding this to your nuxt configuration:

build: {
  extend(config) {
    config.module.rules.push({
      include: /node_modules/,
      test: /\.mjs$/,
      type: "javascript/auto",
    });
  },
},

if this error occurs anywhere else where Webpack is used, make sure to add this to your mjs loader (or handle your mjs files differently but make sure to enable EcmaScript).

{
  include: /node_modules/,
  test: /\.mjs$/,
  type: "javascript/auto",
}

[bdbch]

Let me know if this helps @Anders2303 @sarah2627

[ordas]

@bdbch It's works!!!!!!!

[Shooosty]

@bdbch this solved the problem, thx!

[ordas]

@bdbch Alert!!! It does not work!!! The build does work, but the web responds this:

[bdbch]

Mh this seems to be something different. Let me see what's causing this.

[bdbch]

It seems like GapCursor is added to the Prosemirror state multiple times when imported. I'm looking into this and will create a new issue out of this @ordas

[sarah2627]

Hi, thanks for the super fast answers, especially as my request was not very complete. I added the mjs loader in my webpack configuration and everything worked again (both npm run dev and npm run build). Thanks a lot!

[HZooly]

Webpack build config is working on my Nuxt projet. But I'm wondering why this kind of change is not considered as breaking? v2.0.0-beta.202...v2.0.0-beta.203#diff-0b810c38f3c138a3d5e44854edefd5eb966617ca84e62f06511f60acc40546c7L20