tiptap: Error: Looks like multiple versions of prosemirror-model were loaded

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

I was just writing up a issue for this error. prosemirror-state released 1.3.3 earlier today so a clean install with “tiptap”: “1.26.6” and “tiptap-extensions”: “1.28.6” would throw the above error.

Adding the following to my package.json file did fix the issues on a clean install:

"resolutions": {
    "prosemirror-model": "1.8.2",
    "prosemirror-state": "1.3.2"
  }

But it may be worth adding the other prosemirror packages to avoid similar conflicts in the future as @paramono suggests.

Can this be addressed through tiptap to avoid these types of conflicts?

@philippkuehn Do we know when the fix will be released for this? It is breaking the current TipTap.

yarn upgrade --pattern "@tiptap|prosemirror" resolved the issue for me with only the related packages altered.

this issue has returned in tiptap@1.30.0

With the latest version of tiptap (1.30.0) and tiptap-extensions (1.33.2) the resolutions needs to be updated:

"resolutions": {
    "prosemirror-model": "1.11.2",
    "prosemirror-state": "1.3.3",
    "prosemirror-transform": "1.2.8",
    "prosemirror-view": "1.15.7"
},

Then it is a matter of cleaning and reinstalling

• rm -Rf node_modules/ yarn.lock
• yarn cache clean
• yarn install

(Message for those of you who still have errors and the proposed workaround doesn’t help)

I tried the workaround with resolutions in package.json, but it didn’t help even after clean install.

Then I thoroughly checked which packages are installed in yarn.lock, and found that not only different versions of prosemirror-model were installed, but other prosemirror packages as well. So I simply pinpointed their versions in resolutions to avoid duplication, and made a clean reinstall.

This is what I had to enter in resolutions to make tiptap work:

  "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:

1. Opened yarn.lock and found duplicates for every prosemirror package
2. 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)
3. rm -rf node_modules
4. yarn cache clean
5. yarn install

"resolutions": { "prosemirror-model": "1.8.2" }

This solution worked for me using yarn. I just added it, deletes node_modules/ and did a yarn install

index.js with "type": "commonjs"

const Document = require("@tiptap/extension-document").Document;
const Text = require("@tiptap/extension-text").Text;
const Paragraph = require("@tiptap/extension-paragraph").Paragraph;
const { TiptapTransformer } = require("@hocuspocus/transformer");

const content = {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello world! 🌍"}]}]}

const transformer = TiptapTransformer.extensions([Document, Paragraph, Text]);
const ydoc = transformer.toYdoc(content);
console.log(ydoc);

index.js with "type": "module"

import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { TiptapTransformer } from '@hocuspocus/transformer'

const content = {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hello world! 🌍"}]}]}

const transformer = TiptapTransformer.extensions([Document, Paragraph, Text]);
const ydoc = transformer.toYdoc(content);
console.log(ydoc);

package.json

Hello everyone,

I was wondering if a solution to this issue has been found? I have try the solutions proposed above but no one work.

I work with tiptap@1.30 and tiptap-extensions@1.33.2. I have the problem only with the enter key it seems.

Thanks for help

This will keep breaking with each prosemirror-model and prosemirror-state release (possibly other prosemirror libraries as well) until a fix is implemented.

I’ve corrected this on my end by enforcing a specific version of tiptap and using yarn resolutions to specify versions of prosemirror. This protects from tiptap or prosemirror getting updated unexpectedly, but it then requires watching both libraries for releases.

“tiptap”: “1.27.1”, “tiptap-extensions”: “1.29.1”,

“resolutions”: { “prosemirror-model”: “1.9.1”, “prosemirror-state”: “1.3.3”, },

It would be great to have a better solution though I am not familiar enough with dependency management and the cross-dependencies of tiptap libraries with prosemirror to suggest a permanent solution.

@FreekVR from what I know npm-shrinkwrap is really for old versions of npm, now with package-lock.json we don’t need it anymore.

Is the current issue really an npm problem? I thought the tiptap-extensions strictly requiring prosemirror-model@1.8.2 was the simple problem. I’d love to hear from @philippkuehn here.

I’d love to have a solution while sticking with npm instead of moving to yarn… anybody got something useful to suggest for this?

Same problem when using esm.sh CDN like https://tiptap.dev/docs/editor/installation/cdn.

But here’s very hacky tricky way for those of you who need to use it in a hurry. 😭 Map all multiple versions of prosemirror-model to one version using importmap.

<head>
  <script type="importmap">
    {
      "imports": {
        "https://esm.sh/v135/prosemirror-model@1.19.3/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.19.4/es2022/prosemirror-model.mjs"
      }
    }
  </script>
</head>
<body>
  <script type="module">
    import { Editor } from 'https://esm.sh/@tiptap/core';
    // ...
  </script>
</body>

Thanks everyone reporting this really annoying issue here!

Good news: I think it’s gone with the freshly released version of tiptap. 🎉

And sorry for the long wait! 🙌 We struggled to fund the support and maintenance of tiptap. We recently reached the $1,000/month milestone with sponsors, which allows us to put time into the maintenance of tiptap on a regular basis. Oh, and if you want to sponsors us too: All sponsors get instant access to the upcoming version 2 of tiptap. 👀

Don’t hesitate to comment if you encounter this issue again, happy to look at it then.

@samiell Did You install packages again after adding resolutions to package.json?

Mentioned quick fix is working, I wonder why it’s not for You.

@karol-f, it is working now with fresh yarn install

Wouldn’t it help to mark the prosemirror-* dependencies in the plugins as peer dependencies?

@alexandremasy

Just using this works fine.

"resolutions": {
    "prosemirror-model": "^1.11.2"
},

Will this be fixed? Or the whole project abandoned?

@samiell Did You install packages again after adding resolutions to package.json?

Mentioned quick fix is working, I wonder why it’s not for You.

“resolutions”: { “prosemirror-model”: “1.8.2” }

Thank you so much

I think it is only fixed until new version of prosemirror-model comes out. I suggest using exact versions of prosemirror related packages in all tiptap packages, so npm and yarn have no chance at installing two different versions. Only packages/tiptap/package.json has exact version specified right now.

Agreed! And since lerna is already being used to publish both packages, why not use its fixed/locked mode for the hanlding of versioning (the default)?

One solution would be to use peerDependencies for prosemirror-view package. It will always be deduplicated but consumers of tiptap will need to install prosemirror-view manually.

Having "prosemirror-view": "^1.15.7" in tiptap-extensions and "prosemirror-view": "1.15.7" in tiptap does not help too. tiptap-extensions should probably have exact version of prosemirror packages like tiptap package itself.

Can anyone release an update with locking the version?

Also encountered the problem meanwhile solved with resolutions but need a proper fix.

I also encountered this problem.

Having the same error. Using tiptap@1.27.1 and tiptap-extensions@1.29.1.

The mentioned solution didn’t help me. Nor even with the clean install 😕

It’s working with yarn - make sure You use it and not npm

@stigvanbrabant maybe https://www.npmjs.com/package/npm-force-resolutions

I am experiencing this issue too.

In the meantime, the workaround suggested by @karol-f is resolving the issue .

If you’re using yarn just add the missing prosemirror-* packages:

yarn add prosemirror-commands prosemirror-schema-list ... etc.

when i use "type": "commonjs" in package.json, it works. And with "type": "module", it not work.

I am also receiving this issue.

This issue is happening even in latest version. Is there any long-term solution to this other than the resolutions in the package.json workaround ?

Searching for "prosemirror-model": in @tiptap dir gives these results:

Searching 269 files for "prosemirror-model": ""

node_modules/@tiptap/extension-link/package.json:
   33    "dependencies": {
   34      "linkifyjs": "^3.0.5",
   35:     "prosemirror-model": "^1.16.1", 
   36      "prosemirror-state": "^1.3.4"
   37    },

node_modules/@tiptap/extension-mention/package.json:
   33    "dependencies": {
   34      "@tiptap/suggestion": "^2.0.0-beta.90",
   35:     "prosemirror-model": "^1.16.1",
   36      "prosemirror-state": "^1.3.4"
   37    },

node_modules/@tiptap/suggestion/package.json:
   31    "bundleDependencies": false,
   32    "dependencies": {
   33:     "prosemirror-model": "^1.16.1",
   34      "prosemirror-state": "^1.3.4",
   35      "prosemirror-view": "^1.23.6"

node_modules/@tiptap/core/package.json:
   34      "@types/prosemirror-commands": "^1.0.4",
   35      "@types/prosemirror-keymap": "^1.0.4",
   36:     "@types/prosemirror-model": "^1.16.0",
   37      "@types/prosemirror-schema-list": "^1.0.3",
   38      "@types/prosemirror-state": "^1.2.8",
   ..
   41      "prosemirror-commands": "^1.2.1",
   42      "prosemirror-keymap": "^1.1.5",
   43:     "prosemirror-model": "^1.16.1",
   44      "prosemirror-schema-list": "^1.1.6",
   45      "prosemirror-state": "^1.3.4",

5 matches across 4 files

This bug seems to have surfaced again. These resolutions fixed it for me, along with a clean install:

"resolutions": {
    "prosemirror-model": "1.13.1",
    "prosemirror-view": "1.16.5"
}

Thanks @arokanto, this solved the issue for me 🤗

I don’t think it’s fixed in CDN. Isn’t it? Does anyone know how to fix it in using CDN version? Thanks. Whenever I put enter inside the editor it spit out the stated error.

I think it is only fixed until new version of prosemirror-model comes out. I suggest using exact versions of prosemirror related packages in all tiptap packages, so npm and yarn have no chance at installing two different versions. Only packages/tiptap/package.json has exact version specified right now.

This seems like a straightforward solution. Why not add tiptap-extensions as a dependency of tiptap too, wouldn’t this avoid all the issues with version incompatibility?

@hanspagel Thanks a lot! Removing node_modules and upgrading the new version 1.31.0 solved the issue!

With the latest version of tiptap (1.30.0) and tiptap-extensions (1.33.2) the resolutions needs to be updated:

"resolutions": {
    "prosemirror-model": "1.11.2",
    "prosemirror-state": "1.3.3",
    "prosemirror-transform": "1.2.8",
    "prosemirror-view": "1.15.7"
},

Then it is a matter of cleaning and reinstalling

• rm -Rf node_modules/ yarn.lock
• yarn cache clean
• yarn install

This workaround worked best for me. Thanks!

installing prosemirror-model at exactly the 1.11.2 version at the root of my project seems to have fixed it for me for now

I also have this issue when upgrading to tiptap@1.30.0 and tiptap-extensions@1.32.4 had to rollback to version tiptap@1.29.6

I’ve updated all dependencies https://github.com/scrumpy/tiptap/commit/34d007aca7ff5d0183e5dd541aa0814fe6d10fbc right now but this is not the main issue. If anyone has an idea how to solve this at the core level: please tell me!

hmm… seems to me you should make it a peerDependency

Dear @philippkuehn or @karol-f could I kindly beg for a status update on this issue? Will it be fixed, or is the idea to simply not fix it in tiptap1 (expecting users to do resolutions hack, which isn’t great) but to do that in the upcoming tiptap2?

@karol-f

In my case it wasn’t enough, because I would still get duplicates of prosemirror packages, which would cause:

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

Removing node_modules and cleaning yarn cache are probably optional, but including other prosemirror packages in resolutions was the only way I could make tiptap work for me.

This is not a solution, as explicitly mentioned above in the very definition of this Issue, it’s just a dirty workaround.

have the same but finally it worked after adding the “resolutions” to the packages.json.

after a yarn install it worked as it should be. Thank you very much.

Of course I do use yarn. I tried to remove lock, add mentioned resolution, use specific versions, clear cache, remove node_modules … yet only downgrade to 1.25 fixed the issue.

Is there a workaround known when you’re using npm instead of yarn?