In case of severe TL;DR please scroll down to the end.

I started to use TipTap in my Vue project and got some strange issues. Eventually I found out they are being caused by package version conflicts. Here is the scenario:

Package1 and Package2 both need @cool/stuff. Package1 therefore defines "@cool/stuff": "~1.0.0" in its dependencies. Package2 though was developed with a specific version of @cool/stuff so it defines: "@cool/stuff": "1.2.3" which is the newest version currently available. This works fine because ~1.0.0 will be resolved in the newest 1.x version.

But one fine day the developer of @cool/stuff adds even more cool stuff and decides that the package earned a new version number 1.3. Yeah! Level up!

Unfortunately we have a problem now: Package1 asks for ~1.0.0 so it will from now on get the shiny new version 1.3.0. Yarn and Node are not able to decide that the existing 1.2.3 is sufficient (which it would be) and it installs both versions. This might not be a problem as long as those versions are not interfering but if @cool/stuff is incompatible towards each other (in my case it was prosemirror-model btw) you get weird issues.

Solution

To finally conclude this way too long TIL post and to solve that issue you can add an entry to your package.json:

"resolutions": { "@cool/stuff": "1.2.3" }

This is understood out of the box by Yarn and it is called selective dependency resolutions. NPM doesn't understand it without the help of the package npm-force-resolutions as far as my short research showed me.

Thanks for reading and I hope it helps with that one super weird problem <3