[Bug]: 2.2.0-rc.7 upgrade - "Error: Adding different instances of a keyed plugin (plugin$)" -- worked in 2.1.x

[Nantris]

Which packages did you experience the bug in?

core

What Tiptap version are you using?

2.2.0-rc.7

What’s the bug you are facing?

This error appears for two plugins after upgrading, but we only call them once and there's no discernible difference between the problematic two and all the rest. Adding keys to the plugins doesn't help - it only changes the key in the error.

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

Upgraded editor doesn't throw mystery errors.

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

[svenadlung]

I feel like this could be related to this: 55377eb

Could you please send your output of
npm list y-prosemirror ?

[svenadlung]

Should be fixed with newest version (RC right now).

[K3TH3R]

@svenadlung I'm seeing this error now when I upgrade our repo from 2.1.16 to either 2.2.0 or 2.2.1. Even the most basic setup is still throwing this error for me:

const editor = useEditor({
	content: '',
	extensions: [Document, Paragraph, Text],
})

"@tiptap/core": "2.2.1",
"@tiptap/extension-bold": "2.2.1",
"@tiptap/extension-document": "2.2.1",
"@tiptap/extension-italic": "2.2.1",
"@tiptap/extension-link": "2.2.1",
"@tiptap/extension-paragraph": "2.2.1",
"@tiptap/extension-text": "2.2.1",
"@tiptap/extension-underline": "2.2.1",
"@tiptap/pm": "2.2.1",
"@tiptap/vue-3": "2.2.1",

[svenadlung]

@K3TH3R can you please provide a sandbox?
It sounds like something has been installed with different versions. If possible, delete the lock file and reinstall the packages.

[K3TH3R]

@svenadlung I've been able to confirm now that deleting the yarn.lock file and re-installing dependencies @ v2.2.1 is now working without a problem, thank you.

[svenadlung]

@slapbox can you please recheck with the newest versions and cleaning up lock file if needed? Closing for now.

[Nantris]

@svenadlung I'm sorry for the delay on this. Unfortunately the issue persists in 2.2.1:

Uncaught RangeError: Adding different instances of a keyed plugin (plugin$1)

I scoured our yarn.lock for problems and I see none.

Regarding the idea it might be related to this commit, 55377eb, unfortunately we don't use that extension so that can't be the problem. Just to be sure I ran yarn why y-prosemirror and indeed nothing is found.

[Nantris]

I'm happy to report some clue at least. I mapped over the keys for our plugins and I found that while virtually every plugin is not duplicated, there are just two that are. You can see also here that we include refractor$ twice (not really certain how) but it is correctly given a unique key. It seems that only plugin$1 and $plugin are being duplicated out of 127 plugins.

    "refractor$",
    "plugin$1",
    "plugin$",
    "refractor$1",
    "plugin$1",
    "plugin$",

I was able to determine which plugin the duplicates were and assign them new names.

Unfortunately that doesn't fix the error, it only changes it. Now instead we get:

Adding different instances of a keyed plugin (undefined)

[Nantris]

I thought I made progress by assigning a new PluginKey() to the plugins instead of a string-based key, but after assigning them for each relevant plugin it simply continues in the original error, but now with my newly assigned key:

Uncaught RangeError: Adding different instances of a keyed plugin (handleTripleClick$)

I've more or less confirmed now that this is caused by using .extend() on an extension and then also to use .configure() on the same plugin.

If we remove our .configure() call on the same plugin then this is resolved.

Previously we worked around this with an approach like:

export const CodeBlockPrism = CodeBlock.extend(
  (() => {
    // ...
  })
)

But in 2.2.x this approach causes the same problem, which makes upgrading impossible for us without major rewrites. I hope this can be fixed @svenadlung.

[svenadlung]

@bdbch I think there has been some adjustments to .extend()/.configure() recently, right? I think we should check changes to narrow down the issue.

[Nantris]

I think there has been some adjustments to .extend()/.configure() recently, right?

I do believe I saw it mentioned in the changelogs some time back, but I was unable to find it when writing up my report.

[Nantris]

Could we get this issue re-opened just for clarity's sake?

[igorbrasileiro]

Folks, should this problem be exists at @2.2.2 version?
I did this codepen and i'm getting this error.

Which version should I use, that doesn't have this issue?

[Nantris]

@igorbrasileiro 2.1.x doesn't have this issue. 2.2.x does.

[igorbrasileiro]

@igorbrasileiro 2.1.x doesn't have this issue. 2.2.x does.

I changed all packages version at the codepen to 2.1.0 and 2.1.16, but at both versions i got the same issue. I'll try another approac. Thank you

[Nantris]

@igorbrasileiro in that case you're presumably experiencing a different bug, although I couldn't say what it might be. Best of luck.

[igorbrasileiro]

@igorbrasileiro in that case you're presumably experiencing a different bug, although I couldn't say what it might be. Best of luck.

Yeah, i got it.. The esm.sh cdn resolve the @tiptap/core of internal package dependencies to the latest version. So, for example: @tiptap/react depends on @tiptap/extension-bubble-menu, that depends on @tiptap/core too, this last tiptap/core import points to the latest.

https://esm.sh/@tiptap/react@2.1.0?external=@tiptap/core&deps=@tiptap/extension-floating-menu@2.1.0,@tiptap/extension-bubble-menu@2.1.0,preact@10.19.4&alias=@tiptap/core:@tiptap/core,react:preact/compat,react-dom:preact/compat

[igorbrasileiro]

@slapbox do you have something in mind that fixes the tiptap bug? I can submit a PR to fix it.

[Nantris]

Unfortunately I don't know how to fix this issue.

I wonder if there's any update on fixing this? @svenadlung @bdbch.

[paul-thebaud]

@Nantris I'm facing the same issue. As a workaround for now, I'm checking the plugins length before pushing new plugins instances (to avoid pushing already initialized plugins).

addProseMirrorPlugins() {
  const plugins = this.parent!();

  // FIXME Ensure plugins are empty before adding plugins, see:
  // https://github.com/ueberdosis/tiptap/issues/4704
  if (this.options.enhance && plugins.length === 0) {
    plugins.push(decorateLink());
  }

  return plugins;
},

[yurtsiv]

The problem with .configure() is explained in more detail here #4981

A possible workaround is instead of

const MyExtensions = Extension.create({
   addProseMirrorPlugins() { ... }
})

const ConfiguredExtension = MyExtension.configure({ option: '...' })

do

const MyExtensions = Extension.create({
   addProseMirrorPlugins() { ... }
})

const ConfiguredExtension = MyExtension.extend({
   addOptions() {
        ...this.parent?.(),
       option: '...'
   }
})

(untested)

[Nantris]

@svenadlung has there been any update on this? I'd expect accidental breaking changes to get a little more attention than they seem to be getting and that makes me worried about there being no upgrade path for us.

This issue has been open for almost 4 months now with hardly even an acknowledgement of the problem, much less a path to resolution.

The longer these issues go on, the more likely that the solution becomes someone else's breaking change and then these problems end up locked in. Every week it seems more likely to me that we're going to be stuck on 2.1.13 forever.

[kylecho]

For those struggling to upgrade TipTap to the latest version, check if these packages are dependencies. If they are, try deleting them before upgrading TipTap. I successfully upgraded from version ^2.0.0-beta.209 to ^2.2.5 using this method.

yarn remove prosemirror-commands prosemirror-keymap prosemirror-model prosemirror-schema-list prosemirror-state prosemirror-transform prosemirror-view

[Nantris]

@kylecho thanks for sharing, but unfortunately it did not work.

Even deleting yarn.lock and installing anew does not work. @bdbch

[Nantris]

Removing this.parent?.() inside of addProseMirrorPlugins in an extended Extension apparently resolves this.

Eg CodeBlock.extend(...)

@bdbch @svenadlung

[634750802]

Maybe related to #5136

[nperez0111]

We've just released 2.4.0 with this change. I'm not 100% certain that this is resolved by that, but hopefully it is!

If someone could give me confirmation on whether it is resolved, I can close this issue

[Nantris]

Although we cannot use this version due to other unfixed regressions, I did give 2.4.0 a test. I'm sorry to say it does not fix the issue in my testing. Regardless, thank you very much for the follow-up @@nperez0111.

I believe the best way to test for this issue is to use ...this.parent?.() in addProseMirrorPlugins on an extension which has been extended.

[nperez0111]

@Nantris I've got a fix lined up for it here: #5156

I'll update the description, but I should be doing something else

[nperez0111]

@Nantris what other regressions should I be looking into?

[Nantris]

Looks promising! Thanks for the attention on this @nperez0111!

The biggest outstanding accidental breaking change I'm aware (perhaps not a proper regression) is #4862. It's possible I might discover more once that's fixed and we can upgrade, but until it is we're locked on 2.1.x.

I think the other regressions I'm aware of have been resolved by merged PRs besides #4862 and this issue.

Also, not a regression, but if you have any advice on addressing #5166; I'd really like to see that resolved and would be happy to contribute - although I'm not sure where to begin with it - and especially unsure if it also affects Vue, which I'm not really familiar with.

[nperez0111]

I've just released a beta that should resolve this: v2.5.0-beta.4

[kashanghori]

In My case, I'm facing this error only when I add a History Extension, By the way I installed v2.5.0-beta.4 and still getting error for History extension

[nperez0111]

In My case, I'm facing this error only when I add a History Extension, By the way I installed v2.5.0-beta.4 and still getting error for History extension

Hm, I thought I handled this. @kashanghori Can you show how you are using the history extension?

[kashanghori]

> .5.0-beta.4

 import History from '@tiptap/extension-history' 
 const editor = useEditor({
    extensions: [
      StarterKit,
      SynonymNode,
      Highlight.configure({
        multicolor: true,
      }),
      CharacterCount.configure({
        limit,
      }),
      History.configure({
        depth: 50,
      })
    ],
    content: "",
  });

[nperez0111]

> .5.0-beta.4

 import History from '@tiptap/extension-history' 
 const editor = useEditor({
    extensions: [
      StarterKit,
      SynonymNode,
      Highlight.configure({
        multicolor: true,
      }),
      CharacterCount.configure({
        limit,
      }),
      History.configure({
        depth: 50,
      })
    ],
    content: "",
  });

@kashanghori so the reason this is happening for you is actually valid, the StarterKit comes with the history extension, to add options to it you have to use it like this: https://tiptap.dev/docs/editor/api/extensions/starter-kit#usage

    StarterKit.configure({
      history: { depth: 50 },
    }),

Whereas this issue was erroring when doing a .configure on an extension that was .extended.

You've technically imported the history extension twice so the prosemirror error is valid. We could perhaps give a better error message to notify you of this but that is out of scope for this issue.

[kashanghori]

> .5.0-beta.4

 import History from '@tiptap/extension-history' 
 const editor = useEditor({
    extensions: [
      StarterKit,
      SynonymNode,
      Highlight.configure({
        multicolor: true,
      }),
      CharacterCount.configure({
        limit,
      }),
      History.configure({
        depth: 50,
      })
    ],
    content: "",
  });

@kashanghori so the reason this is happening for you is actually valid, the StarterKit comes with the history extension, to add options to it you have to use it like this: https://tiptap.dev/docs/editor/api/extensions/starter-kit#usage

    StarterKit.configure({
      history: { depth: 50 },
    }),

Whereas this issue was erroring when doing a .configure on an extension that was .extended.

You've technically imported the history extension twice so the prosemirror error is valid. We could perhaps give a better error message to notify you of this but that is out of scope for this issue.

It makes sense now. Thank you, @nperez0111 , for finding this. I was following the docs and didn't notice this.
again thanks for the support, amazing tool

[Nantris]

Confirming this is resolved in 2.5.0-beta.6 (as long as I use workarounds for the other bugs in the version)