Tiptap: Bug after update to 1.19.0 : RangeError: Adding different instances of a keyed plugin (plugin$1)

[ligne13]

I've updated tiptap from v1.8.0 to v1.19.0 and now I have this bug in the console :

[Vue warn]: Error in data(): "RangeError: Adding different instances of a keyed plugin (plugin$1)"

The editor does not work anymore.

[philippkuehn]

try to make a clean install (remove node_modules).
if the issue still exists, please provide a codesandbox.

[ligne13]

Same bug after a clean install.
I do not have the bug in a basic sandbox... maybe a conflict with another dependency on code on my project. I will let you know if I find something.

[ligne13]

Hi @philippkuehn ,

the error is thrown by the prosemirror-state module, inside its EditorState.create method and the Configuration constructor, because 2 plugins have the same key (plugin$, whereas other plugins have an incremental key: plugin$1, plugin$2, etc.) : these plugins are handleTextInput and handleKeydown.

See the screenshots below :

Do you have an idea of what can cause this error ?

thanks

[philippkuehn]

do you add some custom extensions/plugins to your editor?

[ligne13]

Well, that is strange : now it's working. I have not changed anything. Just made a few more npm installs...

Thanks anyway !

[xiongxiaocui]

The

me too

[cbeninati]

Same for me.
I've cleared the yarn cache, removed node_modules and re-run yarn install multiple times.

using: yarn
tiptap version: 1.19.1 (updated from 1.18.0)

code:

import { Editor } from 'tiptap'

//...Vue stuff...

this.editor = new Editor({
  content: doc,
  extensions: [],
})

[cbeninati]

I found out my problem. I had manually changed the versions for tiptap and tiptap-extensions to ^1/19.1. After reverting to my latest commit and instead running yarn upgrade, it is working.

[bbbford]

I am having this same problem. It is intermittent. Clean install did not solve the problem for me...

[Raerten]

Try to delete node_modules and yarn.lock, after run yarn install again

[bbbford]

Thanks @Raerten. I deleted node_modules folder and package-lock.json, then ran npm install. That seems to have done the trick. Thank you very much!

[julianfox]

I still get this error with a fresh install with:
"tiptap": "^1.26.6",
"tiptap-extensions": "^1.28.6"

Here my code:

<template>
  <div class="tf-content-editor">
    <client-only placeholder="Loading...">
      <editor-floating-menu v-slot="{ commands, isActive, menu }" :editor="editor">
        <div
          class="editor__floating-menu"
          :class="{ 'is-active': menu.isActive }"
          :style="`top: ${menu.top}px`"
        >
          <button
            class="menubar__button"
            :class="{ 'is-active': isActive.heading({ level: 1 }) }"
            @click="commands.heading({ level: 1 })"
          >
            H1
          </button>
          <button
            class="menubar__button"
            :class="{ 'is-active': isActive.heading({ level: 2 }) }"
            @click="commands.heading({ level: 2 })"
          >
            H2
          </button>
          <button
            class="menubar__button"
            :class="{ 'is-active': isActive.heading({ level: 3 }) }"
            @click="commands.heading({ level: 3 })"
          >
            H3
          </button>
          <button
            class="menubar__button"
            :class="{ 'is-active': isActive.bullet_list() }"
            @click="commands.bullet_list"
          >
            <icon name="ul" />
          </button>
          <button
            class="menubar__button"
            :class="{ 'is-active': isActive.ordered_list() }"
            @click="commands.ordered_list"
          >
            <icon name="ol" />
          </button>
          <button
            class="menubar__button"
            :class="{ 'is-active': isActive.blockquote() }"
            @click="commands.blockquote"
          >
            <icon name="quote" />
          </button>
          <button
            class="menubar__button"
            :class="{ 'is-active': isActive.code_block() }"
            @click="commands.code_block"
          >
            <icon name="code" />
          </button>
        </div>
      </editor-floating-menu>
      <editor-content class="editor__content" :editor="editor" />
    </client-only>
  </div>
</template>

<script>
import { Editor, EditorContent, EditorFloatingMenu } from 'tiptap'
import {
  Blockquote,
  BulletList,
  CodeBlock,
  HardBreak,
  Heading,
  ListItem,
  OrderedList,
  TodoItem,
  TodoList,
  Bold,
  Code,
  Italic,
  Link,
  History
} from 'tiptap-extensions'

export default {
  components: {
    EditorContent,
    EditorFloatingMenu
  },
  data () {
    return {
      editor: null
    }
  },
  mounted () {
    this.editor = new Editor({
      extensions: [
        new Blockquote(),
        new BulletList(),
        new CodeBlock(),
        new HardBreak(),
        new Heading({ levels: [1, 2, 3] }),
        new ListItem(),
        new OrderedList(),
        new TodoItem(),
        new TodoList(),
        new Link(),
        new Bold(),
        new Code(),
        new Italic(),
        new History()
      ],
      content: `
        <h2>
          Floating Menu
        </h2>
        <p>
          This is an example of a medium-like editor. Enter a new line and some buttons will appear.
        </p>
      `
    })
  },
  beforeDestroy () {
    this.editor.destroy()
  }
}
</script>

I've cleared the yarn cache, removed node_modules and re-run yarn install 1000 times and also run yarn upgrade without any success...

Is it can be related to the new version of Tiptap?

[latelt-j]

Same problem here

[homerager]

Have the same problem, removing node_modules did not help

[jakedolan]

Some further discussion on this here:

577

This appears related multiple versions of prosemirror-state being loaded. It can be worked around by adding the following (yarn) resolutions in your package.json:

"resolutions": {
    "prosemirror-model": "1.8.2",
    "prosemirror-state": "1.3.2",
    "prosemirror-transform": "1.2.2",
    "prosemirror-view": "1.13.4"
  },

To summarize, this is what I did:

Opened yarn.lock and found duplicates for every prosemirror package
For every such package, pinpointed its version in resolutions to prevent multiple versions of the same package from installing (you can try my resolutions above)
rm -rf node_modules
yarn cache clean
yarn install

[shadrachtuck]

@jakedolan thank you good sir!! worked like a charm

[doits]

@jakedolan thanks! Seems like js dependency management is a total mess if one needs to do stuff like this.

[lukkyjoe]

I do not understand the inner-workings deeply enough to be able to give an explanation. But I will say that removing node_modules was insufficient for me. But removing node_modules AND package-lock.json and re npm installing did the trick for me.

[BinaryBrain]

If you encounter this issue using yarn workspace, please note that the resolution code posted by @jakedolan must be placed in your project root package.json and not in a workspace package.json.

[mudin]

This is still happening

[ozgurrgul]

Same problem. Doesnt work with following conditions:

"tiptap": "^1.26.6",
"tiptap-extensions": "^1.28.6",
vue": "^2.6.11"

[mudin]

My problem is fixed. Actually I am using lerna and I removed tiptap from root package.json and keep only in single package where I use it. Maybe this will help someone who is also using lerna

[A-d-o-n-i-s]

UPDATE: seems now tiptap and tiptap-extensions have been bumped up version-wise and it fixed the original problem for me: look a couple of posts below..

OLD:
Still happens for me after:

yarn remove tiptap && yarn remove tiptap-extensions && yarn cache clean && sudo rm -rf node_modules yarn.lock && yarn install && yarn add [email protected] && yarn add [email protected] && yarn dev

and the below in package.json:

"resolutions": {
    "prosemirror-model": "1.8.2",
    "prosemirror-state": "1.3.2",
    "prosemirror-transform": "1.2.2",
    "prosemirror-view": "1.13.4"
  },

with:

yarn list v1.22.4
├─ @vue/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

├─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
└─ [email protected]

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
│  ├─ [email protected]
│  │  ├─ [email protected]
│  │  ├─ [email protected]
│  │  └─ [email protected]
│  ├─ [email protected]
│  │  └─ [email protected]
│  ├─ [email protected]
│  └─ [email protected]
│     ├─ [email protected]
│     └─ [email protected]
├─ [email protected]
│  └─ [email protected]
└─ [email protected]
   └─ [email protected]

The problem is intermittent. For example I can change some text string (say in console.log()) in my App.vue and it'll work (my page renders and no errors in the console), and sometimes it won't. As if there's some timing issue or somesuch..

Someone on issue #577 suggested that the below warnings from yarn install may be related.. Any ideas?

warning "workspace-aggregator-55c332bc-1396-4e97-9318-7d1987769566 > tiptap-commands > [email protected]" has incorrect peer dependency "prosemirror-tables@^0.9.1"

Some of the errors (more follow afterwards but I believe they're triggered because of this first one..) I'm seeing in my console:

vue.esm.js:629 [Vue warn]: Error in data(): "RangeError: Adding different instances of a keyed plugin (plugin$1)"

found in

---> <Add> at src/views/values/Add.vue
       <Index> at src/views/values/index.vue
         <Home> at src/views/index.vue
           <App> at src/App.vue
             <Root>
warn @ vue.esm.js:629

vue.esm.js:1896 RangeError: Adding different instances of a keyed plugin (plugin$1)
    at eval (index.es.js:773)
    at Array.forEach (<anonymous>)
    at new Configuration (index.es.js:771)
    at Function.create (index.es.js:909)
    at Editor.createState (tiptap.esm.js:1174)
    at Editor.createView (tiptap.esm.js:1259)
    at Editor.init (tiptap.esm.js:1078)
    at new Editor (tiptap.esm.js:1052)
    at VueComponent.data (Add.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:156)
    at getData (vue.esm.js:4749)
logError @ vue.esm.js:1896

[ozgurrgul]

This comment on #577 fixed my issue:

https://github.com/scrumpy/tiptap/issues/577#issuecomment-600865824

[A-d-o-n-i-s]

Thanks, but I tried it without any luck (it's all in my report above..)

[jakedolan]

@A-d-o-n-i-s It appears that you are still loading multiple versions of prosemirror-state.

├─ [email protected]
│ └─ [email protected]
├─ [email protected]
│ ├─ [email protected]
│ │ ├─ [email protected]

For this workaround, you may need to investigate why your resolutions in the package.json is not enforcing the resolution to a single version of the prosemirror-state package.

[A-d-o-n-i-s]

Oh! I missed that. Thank you @jakedolan!

Any thoughts if this could be affecting things?

warning "workspace-aggregator-55c332bc-1396-4e97-9318-7d1987769566 > tiptap-commands > [email protected]" has incorrect peer dependency "prosemirror-tables@^0.9.1"

[prodigy7]

This bug is currently a absolut show stopper for me. Would be nice, see a fix!

[A-d-o-n-i-s]

Yes, TOTALLY. I'm being asked by my company to look at other editors now for a site-wide switch! This is a blow to Prosemirror and Tiptap and Vue.js...

UPDATE: seems now tiptap and tiptap-extensions have been bumped up version-wise (patch=7) and it fixed the original problem! Yey! Thank you!

Started with:

yarn remove tiptap && yarn remove tiptap-extensions && yarn cache clean && sudo rm -rf node_modules yarn.lock && yarn install && yarn add tiptap && yarn add tiptap-extensions && yarn dev

with empty "resolutions": {} in package.json

and after yarn list --pattern tiptap && yarn list --pattern prosemirror I now get:

yarn list v1.22.4
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

[amraei]

For me, this occurred after running npm audit fix --force. I think there is a problem with prosemirror but I didn't investigated enough. Removing node_modules AND package-lock.json and then a fresh install solved it.

[panayotisk]

I had the same issue. I needed to import prosemirror-state and prosemirror-view because I had to modify some extensions. What finally worked for me was:

1. Remove everything tiptap and prosemirror related from package.json
2. Remove node_modules directory and package-lock.json
3. Run npm install tiptap tiptap-extensions tiptap-commands prosemirror-state prosemirror-view
4. Run npm install

Somehow the 1st and 3rd step made a difference in my case.

[abusedmedia]

Same issue here and the @panayotisk advice worked for me as well.

[nicooprat]

Can confirm it too, without manually editing package-lock.json or installing ProseMirror related packages:

• npm remove tiptap tiptap-commands tiptap-extensions
• rm -rf node_modules
• npm i -S tiptap tiptap-commands tiptap-extensions

Finally fixed this months-long bug! 😌

[doits]

With latest presemirror-model 1.10.0 we are back at this again, at least with yarn. It installs version 1.9.1 and 1.10.0 and there it goes.

tiptap-commands explicitly requires version 1.9.1 (why that strict?), other dependents have it required with a version range (e.g. ^1.1.0).

I fixed it by forcing 1.10.0 for all packages in package.json, which seems to work out so far:

{
  resolutions: {
    prosemirror-model: "~1.10.0"
  }
}

[maximecolin]

Got this error recently after updating dependencies. The error come from different installed versions of some prosemirror plugins.

Use yarn list --pattern prosemirror to see installed versions.

If you got something like this, several versions of the same plugin are installed:

yarn list v1.22.5
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
└─ [email protected]
   ├─ [email protected]
   └─ [email protected]
      └─ [email protected]

Here prosemirror-commands 1.1.5 and 1.1.4, prosemirror-state 1.3.4 and 1.3.3 and prosemirror-view 1.17.2 and 1.16.5 are installed.

You can resolve this by using resolutions to force the versions of each plugin in order to install one unique version of each.

For exemple :

    "resolutions": {
        "prosemirror-commands": "1.1.5",
        "prosemirror-state": "1.3.4",
        "prosemirror-view": "1.17.2"
    }

Then rm -Rf node_modules/ and yarn install / npm install.

Now, when running yarn list --pattern prosemirror, each plugin must appear once, like :

├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

[hanspagel]

Thanks! Seems to be the same as in #947. I’ll work on that one. ✌️