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

[karol-f]

Describe the bug
When using the editor (e.g. using ENTER key) it's not working, and we got error in the console:

Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded)

Due to [email protected] and [email protected] loaded simultaneously.

tiptap-extensions package requires strictly version 1.8.2 and other packages prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.8.1 which resolves to 1.9.0

Steps to Reproduce / Codesandbox Example
Steps to reproduce the behaviour:

1. install

"tiptap": "^1.27.1",
"tiptap-extensions": "^1.29.1"

with Yarn. This will install [email protected] and [email protected].

1. When using the editor (e.g. using ENTER key) it's not working, and we got error in the console

Expected behaviour
Editor should work, there should be only one prosemirror-model package installed.

Quick and dirty workaround for users (it's not proper fix!) - use resolutions entry in package.json:

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

Then remove node_modules, yarn.lock and install packages again.

[njoguamos]

I am experiencing this issue too.

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

[samiell]

I am experiencing the same issue. The suggested fix is not working either.
RangeError: Can not convert <> to a Fragment (looks like multiple versions of prosemirror-model were loaded).
However, if I paste a paragraph of text, it works fine. An odd behaviour

[karol-f]

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

[Hyperblaster]

I think this is the same issue. I get this in the console
Error in created hook: RangeError: Adding different instances of a keyed plugin (plugin$)

[samiell]

@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

[kfields]

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

Here's a fresh issue from prosemirror-utils: Update prosemirror-tables to 1.0.0 #85. Perhaps asking this person politely to update the dependencies will solve the issue. I did.

[stigvanbrabant]

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

[karol-f]

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

[stigvanbrabant]

@karol-f yeah i tried that one but it doesn't seem to resolve the issue

[stigvanbrabant]

Seems that only one version is installed tho.

[jscaux]

Also experiencing this issue (I'm using npm).

[jscaux]

Isn't the clean solution simply for the maintainer @philippkuehn to bump up the dependency of tiptap from [email protected] to the latest [email protected] ? I would prefer not relying on dirty workarounds.

[karol-f]

@jscaux it might not be so simple. I've checked some time ago and there were compatibility issues with package newer than [email protected] in tiptap-extensions. Didn't check it lately though.

[jscaux]

I guess this error is being thrown by Fragment.from in prosemirror-model/src/fragment.js. The problem seems to be (from the console log Can not convert <> to a Fragment) that tiptap calls this with nodes as <> instead of null. But do you see from where it does that?

[danielchodusov]

The mentioned solution didn't help me. Nor even with the clean install :/

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

[karol-f]

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

[danielchodusov]

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.

[DavidRouyer]

@danielchodusov Take a look at your yarn.lock file, you should see multiple packages resolving multiple versions of prosemirror-model. That's the issue.

[webislife]

have same problem

[nodegin]

same here

[MrZoidbergMD]

"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

[AlanHolmes]

Just what I was looking for, hopefully, this will be resolved without this workaround at somepoint

[tobischulz]

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.

[jscaux]

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

[nodegin]

@jscaux Just modify the line in dependencies to "prosemirror-model": "1.8.2" then run npm i

[jscaux]

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

[FreekVR]

I think for npm I once saw it mentioned to use npm-shrinkwrap, but the
entire reason that npm makes this so difficult is why we've moved to yarn
internally :)

Op di 17 mrt. 2020 om 15:49 schreef Jean-Sébastien Caux <
[email protected]>:

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

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/scrumpy/tiptap/issues/577#issuecomment-600112509, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AADF5CCJ7343ORB47HKYQGTRH6EWHANCNFSM4KEN25WQ
.

[jscaux]

@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 [email protected] was the simple problem. I'd love to hear from @philippkuehn here.

[ahsanulhaque]

Like @jscaux, I'd also prefer a proper fix using npm. Yarn resolutions fix did not work.

[karol-f]

@ahsanulhaque of course it's working. Maybe check https://github.com/scrumpy/tiptap/issues/577#issuecomment-574890105

[ahsanulhaque]

@karol-f I did, I'm not sure what I'm doing wrong though. Removed the /node_modules directory, added the resolutions bit to package.json and ran yarn install. Rebuilding doesn't seem to have any effect...

[karol-f]

@ahsanulhaque maybe remove the yarn.lock

[ahsanulhaque]

@karol-f Thanks, that seems to have fixed it.

[Sogl]

Same here. Section "resolutions" helped me.

[paramono]

(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

[karol-f]

@paramono deleting yarn.lock should solve problems, isn't it?
https://github.com/scrumpy/tiptap/issues/577#issuecomment-600477198

[paramono]

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

[jakedolan]

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?

[shadrachtuck]

this is still an issue. anyone fix this?

[karol-f]

I don't see that problem anymore:

"tiptap": "^1.27.1",
"tiptap-extensions": "^1.29.1",

[rudolfbyker]

@karol-f I think you closed this prematurely.

Dependencies:

    "tiptap": "^1.27.1",
    "tiptap-commands": "^1.13.1",
    "tiptap-extensions": "^1.29.1",

yarn.lock:

[email protected]:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.9.1.tgz#8c08cf556f593c5f015548d2c1a6825661df087f"
  integrity sha512-Qblh8pm1c7Ll64sYLauwwzjimo/tFg1zW3Q3IWhKRhvfOEgRKqa6dC5pRrAa+XHOIjBFEYrqbi52J5bqA2dV8Q==
  dependencies:
    orderedmap "^1.1.0"

prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.8.1:
  version "1.8.2"
  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.8.2.tgz#c74eaacb0bbfea49b59a6d89fef5516181666a56"
  integrity sha512-piffokzW7opZVCjf/9YaoXvTC0g7zMRWKJib1hpphPfC+4x6ZXe5CiExgycoWZJe59VxxP7uHX8aFiwg2i9mUQ==
  dependencies:
    orderedmap "^1.1.0"

Still getting the same error.

[nicooprat]

@rudolfbyker Reinstalling all tiptap packages finally worked for me and others, check last comments there https://github.com/scrumpy/tiptap/issues/305

[doits]

I can confirm this issue is present again since prosemirror-model 1.10.0 release, at least with yarn. It looks like this for me:

    "tiptap": "^1.27.1",
    "tiptap-commands": "^1.13.1",
    "tiptap-extensions": "^1.29.1",

[email protected]:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.9.1.tgz#8c08cf556f593c5f015548d2c1a6825661df087f"
  integrity sha512-Qblh8pm1c7Ll64sYLauwwzjimo/tFg1zW3Q3IWhKRhvfOEgRKqa6dC5pRrAa+XHOIjBFEYrqbi52J5bqA2dV8Q==
  dependencies:
    orderedmap "^1.1.0"

prosemirror-model@^1.0.0, prosemirror-model@^1.1.0, prosemirror-model@^1.8.1:
  version "1.10.0"
  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.10.0.tgz#bb1101732bccacf336e23a36a8b045b865025fa2"
  integrity sha512-xTMbbO2q4abs5lJdeRvk/SrftNfZlMdvChKziTiK+OKtP8LkQI8uw39u4S5zqyflrmW3Or6+qnyFPf1p4v2u1g==
  dependencies:
    orderedmap "^1.1.0"

[jakedolan]

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.

[paulhuisman]

Having the same error. Using [email protected] and [email protected].

[jscaux]

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?

[codingcn]

I also encountered this problem.

[dkotik]

I am also experiencing this issue. Could not get the work around with yarn/resolutions to help.

[ayush1303]

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

[nodegin]

Can anyone release an update with locking the version?

[Cigoler]

I have this error, but I can't find reference to prosemirror in my package file, only ini the yarn.lock file. If I put resolutions at the bottom of my package.json I get complaints about the format of the file being incorrect. Any help on this please thanks.

I cut and paste the resolutions command from above and it didn't work - rewrote it manually and it does. Nevermind, this 'fix' works for now.

[justalever]

Can confirm none of the workarounds work at this point for me. This makes it not useable for me which is a bummer.

[shaunc]

hmm... seems to me you should make it a peerDependency

[philippkuehn]

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!

[parz1]

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.

I finally worked when downgrading to 1.26.6.

[jakedolan]

I've updated all dependencies 34d007a 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!

@philippkuehn Do you see this as an underlying issue with Prosemirror? If so, would you have influence with that team to drive a solution through them?

[Dorwido]

Only just installed tiptap and got the same problem as described here, prosemirror-model 1.10 and 1.11 are installed, output of yarn why command:

yarn why prosemirror-model
yarn why v1.22.4
[1/4] Why do we have the module "prosemirror-model"...?
[2/4] Initialising dependency graph...
warning Resolution field "@babel/[email protected]" is incompatible with requested version "@babel/parser@^7.8.7"
warning Resolution field "@babel/[email protected]" is incompatible with requested version "@babel/parser@^7.8.6"
warning Resolution field "@babel/[email protected]" is incompatible with requested version "@babel/parser@^7.8.6"
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "prosemirror-model"
info Reasons this module exists

• Hoisted from "prosemirror-view#prosemirror-model"
• Hoisted from "tiptap-extensions#prosemirror-model"
• Hoisted from "tiptap#prosemirror-commands#prosemirror-model"
• Hoisted from "tiptap#prosemirror-gapcursor#prosemirror-model"
• Hoisted from "tiptap#prosemirror-state#prosemirror-model"
• Hoisted from "prosemirror-view#prosemirror-transform#prosemirror-model"
• Hoisted from "tiptap#tiptap-commands#prosemirror-model"
• Hoisted from "tiptap#tiptap-utils#prosemirror-model"
• Hoisted from "tiptap-extensions#prosemirror-tables#prosemirror-model"
• Hoisted from "tiptap#tiptap-commands#prosemirror-schema-list#prosemirror-model"
  info Disk size without dependencies: "900KB"
  info Disk size with unique dependencies: "940KB"
  info Disk size with transitive dependencies: "940KB"
  info Number of shared dependencies: 1
  => Found "tiptap#[email protected]"
  info This module exists because "tiptap" depends on it.
  info Disk size without dependencies: "900KB"
  info Disk size with unique dependencies: "940KB"
  info Disk size with transitive dependencies: "940KB"
  info Number of shared dependencies: 1
  => Found "tiptap#prosemirror-view#[email protected]"
  info This module exists because "tiptap#prosemirror-view" depends on it.
  info Disk size without dependencies: "900KB"
  info Disk size with unique dependencies: "940KB"
  info Disk size with transitive dependencies: "940KB"
  info Number of shared dependencies: 1
  Done in 0.82s.

[kfirba]

Can confirm the issue is present by default. Adding the resolutions key to package.json fixes the issue, for now:

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

[nodegin]

Will this be fixed? Or the whole project abandoned?

[lehni]

Related issues: #760, #720

[struthersdan]

this issue has returned in [email protected]

[Demivan]

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.

[lehni]

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)?

[nagbg]

Had the same issue and are using NPM.
I fixed the problem by removing my tiptap dependencies and running install.
Than installing the tiptap package end extension package again.

├─┬ [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├── [email protected] │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ └── [email protected] deduped │ ├─┬ [email protected] │ │ ├── [email protected] deduped │ │ └─┬ [email protected] │ │ └── [email protected] deduped │ └─┬ [email protected] │ └── [email protected] deduped └─┬ [email protected] ├── [email protected] deduped ├─┬ UNMET PEER DEPENDENCY [email protected] │ └── [email protected] deduped └─┬ [email protected] └── [email protected] deduped

[mcauz]

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 [email protected] and [email protected]. I have the problem only with the enter key it seems.

Thanks for help

[chrisjbrown]

I also have this issue when upgrading to [email protected] and [email protected]
had to rollback to version [email protected]

[Guillaume-N]

Same issue with [email protected] and [email protected], I get an error complaining that multiple prosemirror-model versions are installed.

I typed npm list prosemirror-model
As you can see here every package loads [email protected] except from tiptap that loads [email protected]

@myproject
├─┬ @myproject/subproject
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ ├── [email protected] 
│ └─┬ [email protected]
│   └── [email protected]  deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ └─┬ [email protected]
│   └── [email protected]  deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ ├── [email protected] 
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ └─┬ [email protected]
│   └── [email protected]  deduped
├─┬ [email protected]
│ ├── [email protected]  deduped
│ ├─┬ [email protected]
│ │ └── [email protected]  deduped
│ └─┬ UNMET PEER DEPENDENCY [email protected]
│   └── [email protected]  deduped
└─┬ [email protected]
  └── [email protected]  deduped

The problem seems to be that tiptap-extensions requires "prosemirror-model": "^1.11.2" (notice the ^) while tiptap requires "prosemirror-model": "1.11.2" (without ^)

https://github.com/ueberdosis/tiptap/blob/main/packages/tiptap/package.json
https://github.com/ueberdosis/tiptap/blob/main/packages/tiptap-extensions/package.json

[Guillaume-N]

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

[sublinenhy]

same error here, according to the error message, I found 2 prosemirror-model packages, one in /node_modules, another in /node_modules/tiptap/node_modules.
my solution here : delete the prosemirror-model package in /node_modules/tiptap/node_modules
wonder if there is a more proper way to sovle it

[ilicmarko]

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

[alexandremasy]

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

[gijsroge]

@alexandremasy

Just using this works fine.

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

[Pckool]

Any developments on this? And is this an issue with how tiptap handles prose-mirror or an issue with prose-mirror itself?

[oliviermills]

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!

[hanspagel]

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.

[Demivan]

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.

[mudin]

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

[reflexator]

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!

This is only, what work for me. I have installed 1.31.0, but it is not working for me

[legendarylion]

Laravel Vue Application:
Error in mounted hook: "RangeError: Adding different instances of a keyed plugin (plugin$1)"

Deleting the node_modules and package-lock.json, then npm install npm run watch did not resolve the issue.

Added to package.json:

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

Deleted node_modules, package-lock.json npm run watch

Issue persists:
Error in mounted hook: "RangeError: Adding different instances of a keyed plugin (plugin$1)"

Note: I did try to use npm's force-resolution, but that method did not work for me:
https://www.npmjs.com/package/npm-force-resolutions

Following the steps outlined here, and switching to yarn worked: https://github.com/ueberdosis/tiptap/issues/577#issuecomment-600851902

[hanspagel]

Would you mind to try the latest version? It should be fixed. 👍