search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
25.38k stars 2.17k forks source link

RangeError: Adding different instances of a keyed plugin (plugin$) #2150

Closed weitanai closed 2 years ago

weitanai commented 2 years ago

What’s the bug you are facing?

update "@tiptap/core": "2.0.0-beta.130" @tiptap/vue-2": "^2.0.0-beta.60", use PlaceHolder plugin away report "RangeError: Adding different instances of a keyed plugin (plugin$)"

How can we reproduce the bug on our side?

@tiptap/core": "2.0.0-beta.130" @tiptap/vue-2": "^2.0.0-beta.60", @tiptap/extension-placeholder": "^2.0.0-beta.39",

Can you provide a CodeSandbox?

No response

What did you expect to happen?

not show RangeError: Adding different instances of a keyed plugin (plugin$)

Anything to add? (optional)

No response

Did you update your dependencies?

Are you sponsoring us?

philippkuehn commented 2 years ago

Can’t reproduce this. Please try to remove your lock files or do a fresh install. Feel free to re-open if you provide a reproducable demo.

SalahAdDin commented 1 year ago

I'm getting this specifically with Gapcursor extension.

"dependencies": {
    "@strapi/icons": "1.4.1",
    "@tiptap/core": "2.0.0-beta.209",
    "@tiptap/extension-blockquote": "2.0.0-beta.209",
    "@tiptap/extension-bold": "2.0.0-beta.209",
    "@tiptap/extension-bullet-list": "2.0.0-beta.209",
    "@tiptap/extension-character-count": "2.0.0-beta.209",
    "@tiptap/extension-code": "2.0.0-beta.209",
    "@tiptap/extension-code-block": "2.0.0-beta.209",
    "@tiptap/extension-color": "2.0.0-beta.209",
    "@tiptap/extension-document": "2.0.0-beta.209",
    "@tiptap/extension-gapcursor": "2.0.0-beta.209",
    "@tiptap/extension-hard-break": "2.0.0-beta.209",
    "@tiptap/extension-heading": "2.0.0-beta.209",
    "@tiptap/extension-history": "2.0.0-beta.209",
    "@tiptap/extension-horizontal-rule": "2.0.0-beta.209",
    "@tiptap/extension-image": "2.0.0-beta.209",
    "@tiptap/extension-italic": "2.0.0-beta.209",
    "@tiptap/extension-link": "2.0.0-beta.209",
    "@tiptap/extension-list-item": "2.0.0-beta.209",
    "@tiptap/extension-ordered-list": "2.0.0-beta.209",
    "@tiptap/extension-paragraph": "2.0.0-beta.209",
    "@tiptap/extension-strike": "2.0.0-beta.209",
    "@tiptap/extension-table": "2.0.0-beta.209",
    "@tiptap/extension-table-cell": "2.0.0-beta.209",
    "@tiptap/extension-table-header": "2.0.0-beta.209",
    "@tiptap/extension-table-row": "2.0.0-beta.209",
    "@tiptap/extension-text": "2.0.0-beta.209",
    "@tiptap/extension-text-align": "2.0.0-beta.209",
    "@tiptap/extension-text-style": "2.0.0-beta.209",
    "@tiptap/extension-underline": "2.0.0-beta.209",
    "@tiptap/extension-youtube": "2.0.0-beta.209",
    "@tiptap/prosemirror-tables": "1.1.3",
    "@tiptap/react": "2.0.0-beta.209",
    "prosemirror-commands": "1.5.0",
    "prosemirror-gapcursor": "1.3.1",
    "prosemirror-history": "1.3.0",
    "prosemirror-keymap": "1.2.0",
    "prosemirror-model": "1.18.3",
    "prosemirror-schema-list": "1.2.2",
    "prosemirror-state": "1.4.2",
    "prosemirror-transform": "1.7.0",
    "prosemirror-view": "1.29.1",
    "react-icons": "4.7.1"
  },
pspierce commented 1 year ago

Experiencing this as well using Sveltekit.

pspierce commented 1 year ago

Found an old extension I wasn't actually using anyway, "svelte-gh-hotkey." Once I commented that one out, the error went away. If you are seeing this error and you are using extensions outside of those provided by ueberdosis, start with commenting those out until you find the one causing the issue.

divmgl commented 1 year ago

I'm having this issue right now with Placeholder. I'm having to remove the Placeholder extension and build the placeholder functionality myself, which is a massive waste of time. Has anyone found the solution to this?

CapitaineToinon commented 1 year ago

TL;DR

I believe this issue is caused by an incorrect upgrade from a version below beta.210 to above beta.210, the update that added @tiptap/pm. My solution has been to uninstall everything tiptap related from your project and then reinstalling everything.

npm uninstall @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit // and other extensions
cat package-lock.json | grep tiptap // ensure nothing is installed
cat package-lock.json | grep prosemirror // ensure nothing is installed
npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit // and other extensions

Maybe just deleting node_modules AND package-lock.json (or yarn.lock) to then reinstall everything also works but in my case, it broke my project because of packages unrelated to tiptap so I couldn't test that option. Someone else can let us know.

To be fair, the blog post talking the upgrade mentions that it is important to have a single version of prosemirror accross your project but just installing the packages again doesn't seems to be enough to upgrade and the blog post doesn't mention a better way to handle things.

LONG VERSION

I'm having this issue by trying to update a project that 2.0.0-beta.23 to 2.0.0-beta.218. I uninstalled everything but the packages listed in the getting started section, being @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit in my case. Creating a simple editor with the StarterKit extention and nothing else.

I looked at the stack trace to undetstand what's happening. The root cause is that the createKey function from prosemirror-state returns duplicated key, which seems to indicate that file is loaded multiple times and thus using a different keys object to increment from.

https://github.com/ProseMirror/prosemirror-state/blob/master/src/plugin.ts#L117-L123

And this seems to be caused by some extensions needing to load prose mirror plugins. In the extension manager, each extension is adding a keyed plugin here:

https://github.com/ueberdosis/tiptap/blob/9e9e48936809f085dd1bf3919e12ec23cfa17a4f/packages/core/src/ExtensionManager.ts#L254-L256

which is all fine and add plugins with name plugin$, plugin$1, plugin$2, etc. So far so good. But down a few lines, some plugins can also load prose mirror plugins with the addProseMirrorPlugins function.

https://github.com/ueberdosis/tiptap/blob/9e9e48936809f085dd1bf3919e12ec23cfa17a4f/packages/core/src/ExtensionManager.ts#L278-L288

In my case (and that's the first extension I found causing this issue), the gapCursor extension is the first one requiring to add prose mirror plugins.

https://github.com/ueberdosis/tiptap/blob/9e9e48936809f085dd1bf3919e12ec23cfa17a4f/packages/pm/gapcursor/index.ts#L1

This internally calls prosemirror-gapcursor which creates its own Plugin

https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/src/index.ts#L15

Except here it seems to have imported its own file and now it starts naming plugins from the start again (plugin$, plugin$1, plugin$2) even though we already have some of those keys in our plugins.

Finally, all plugins are added here

https://github.com/ueberdosis/tiptap/blob/9e9e48936809f085dd1bf3919e12ec23cfa17a4f/packages/core/src/ExtensionManager.ts#L303

And it ends up cause the issue. I tried reproducing the issue on a fresh nuxt 2 app (which is my setup) but everything works just fine. When comparing this working project's lock file with mine, I couldn't see anything different at a glance.

So I tried something. I removed the resolutions from my package.json and also uninstalled everything tiptap related from my project. After then verifiying that any @tiptap/* package and prosemirror-* packages were gone from my lock files, I then reinstalled everything and now it seems to work.

cif commented 1 year ago

Thanks @CapitaineToinon for the detailed description above, I can confirm with the debugger I am facing the exact same issue with prosemirror-gapcursor.

TL;DR / Quick Fix

I was able work around this by configuring StarterKit in the extensions as follows: 

...
extensions: [
   StarterKit.configure({
    gapcursor: false,
    dropcursor: false,
  })
],

Longer story possible fix...

I am able to replicate this with a new install on v2.1.0-rc.4 and thus far am not able to resolve by simply re-installing. I've tried lots of different version combinations, sometimes I am met with issues resolving the @tiptap/pm/state. I have eliminated the possibility of any other instances of prosemirror being installed.

I do believe this is an issue others will run into in the future, but we shall see.

Seems like a potential fix would be go get prosemirror plugins (namely gapcursor and dropcursor) to use what appears to be the ability to specify their own key 🤔 ?

Given more time, perhaps I would have been more successful in leveraging the injected key in my locally linked repo, alas the quick workaround turned up in the docs lead me away... for now.

RadekHavelka commented 1 year ago

thank you @cif, had the same issue, commenting out the two extensions in StarterKit did help. I dont use local version, I develop with TipTap imports via https://esm.sh, something must have changed there in recent month or so, it was working before.

sgedye commented 2 weeks ago

FYI - I had this issue with the following packages

"@tiptap/core": "^2.4.0",
"@tiptap/extension-link": "^2.4.0",
"@tiptap/extension-placeholder": "^2.4.0",
"@tiptap/pm": "^2.4.0",
"@tiptap/react": "^2.4.0",
"@tiptap/starter-kit": "^2.4.0",

As philippkuehn suggested. I did the following:

  1. Remove the @tiptap packages (yarn remove @tiptap/core @tiptap/extension-link @tiptap/extension-placeholder @tiptap/pm @tiptap/react @tiptap/starter-kit)
  2. Deleted the yarn.lock file
  3. Deleted the node_modules folder
  4. Cleaned the cache - i.e. ran yarn cache clean
  5. Installed the packages - i.e. ran yarn
  6. Re-added the @tiptap packages (same version - i.e. yarn add @tiptap/core @tiptap/extension-link @tiptap/extension-placeholder @tiptap/pm @tiptap/react @tiptap/starter-kit)

The above steps resolved this issue for me.