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

[mirus-ua]

I checked this combination of packages without the tiptap-solid library and it's worked, so I guess the problem in the package. I can provide additional information if needed

Can be reproduced with the example code

import { Component } from "solid-js";
import StarterKit from "@tiptap/starter-kit";
import { createEditor, EditorContent } from "tiptap-solid";

const App: Component = () => {
  const editor = createEditor({
    extensions: [StarterKit],
    content: `Hello world!`,
  });
  return <EditorContent editor={editor()} />;
};

The package.json dependencies

"@tiptap/core": "^2.0.0-beta.125",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.42",
"@tiptap/extension-floating-menu": "^2.0.0-beta.36",
"@tiptap/starter-kit": "^2.0.0-beta.183",
"solid-js": "^1.3.13",
"tiptap-solid": "^0.1.2"

The full text of the error

Uncaught (in promise) RangeError: Adding different instances of a keyed plugin (plugin$)
    at state.js:50:15
    at Array.forEach (<anonymous>)
    at new Configuration (state.js:48:26)
    at EditorState.reconfigure (state.js:204:19)
    at Editor.createView (Editor.ts:278:33)
    at new Editor (Editor.ts:86:10)
    at createEditor.js:8:26
    at untrack (dev.js:435:12)
    at Object.fn (dev.js:460:22)
    at runComputation (dev.js:705:22)

[andi23rosca]

Quite a late response but I finally figured out a workaround, seems like everyone is having these issues even with tiptap maintained packages like @tiptap/vue

There's 2 fixes I know of

First one is to disable dropcursor and gapcursor

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

Not ideal but if you don't need them...

Second one is:

If you use vite you can explicitly install prosemirror dependencies yarn add prosemirror-state prosemirror-transform prosemirror-model prosemirror-view or npm install, etc. And then in vite.config.js add this:

  optimizeDeps: {
    include: [
      'prosemirror-state',
      'prosemirror-transform',
      'prosemirror-model',
      'prosemirror-view'
    ]
  }

[SalahAdDin]

Quite a late response but I finally figured out a workaround, seems like everyone is having these issues even with tiptap maintained packages like @tiptap/vue

There are 2 fixes I know of

First one is to disable dropcursor and gapcursor

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

Not ideal but if you don't need them...

Second one is:

If you use vite you can explicitly install prosemirror dependencies yarn add prosemirror-state prosemirror-transform prosemirror-model prosemirror-view or npm install, etc. And then in vite.config.js add this:

  optimizeDeps: {
    include: [
      'prosemirror-state',
      'prosemirror-transform',
      'prosemirror-model',
      'prosemirror-view'
    ]
  }

But it disables both dropcursor and gapcursor.

[andi23rosca]

@SalahAdDin the second fix doesn't need to disable them

[andi23rosca]

Added a section in the readme for fixing the error, marking this issue as solved https://github.com/andi23rosca/tiptap-solid/commit/da2db52d6f53e8d445765ce8ad389cbc6dc9f3ee