tiptap: Recent port of ProseMirror to TypeScript and ProseMirror version bumps (hours ago) break TipTap

A quick workaround for those facing the same issue is restricting the prosemirror dependencies to the previous minor version in your own package.json, e.g.

    "prosemirror-commands": "~1.2.2",
    "prosemirror-history": "~1.2.0",
    "prosemirror-keymap": "~1.1.5",
    "prosemirror-model": "~1.16.1",
    "prosemirror-schema-list": "~1.1.6",
    "prosemirror-state": "~1.3.4",
    "prosemirror-transform": "~1.4.2",
    "prosemirror-view": "~1.23.13",

(There may be other transitive dependencies to prosemirror in your project that you have to adjust)

I believe I worked around this issue on our side by adding this to our Webpack configuration:

resolve: {
    alias: {
        'prosemirror-state': path.resolve('./node_modules/prosemirror-state'),
    }
}

Although probably unrelated to the issue at hand, since I’ve discussed this here, I thought it was best to share the workaround here too.

Having investigating this further, there is a way to mitigate it until a permanent solution emerges, when using yarn.

WORKAROUND:

Add the following resolutions entry to your application’s package.json, at root level (same level as your dependencies):

"resolutions": {
        "prosemirror-commands": "~1.2.1",
        "prosemirror-keymap": "~1.1.5",
        "prosemirror-model": "~1.16.1",
        "prosemirror-schema-list": "~1.1.6",
        "prosemirror-state": "~1.3.4",
        "prosemirror-transform": "~1.3.3",
        "prosemirror-view": "~1.23.6",
        "@types/prosemirror-commands": "~1.0.4",
        "@types/prosemirror-keymap": "~1.0.4",
        "@types/prosemirror-model": "~1.16.0",
        "@types/prosemirror-schema-list": "~1.0.3",
        "@types/prosemirror-state": "~1.2.8",
        "@types/prosemirror-transform": "~1.1.5",
        "@types/prosemirror-view": "~1.23.1"
  }

These dependencies are copied verbatim from the TipTap core package.json, and altered to prevent installing higher versions, except patches (^ changed to ~) as per @NeoDobby’s suggestion - thanks for that! The @types are also added here, as otherwise the newer versions would cause critical typing errors.

The equivalent for npm 8+ would be the overrides entry in package.json, but according to @NeoDobby, with npm it may work by simply putting these under your dependencies.

This should only be a temporary workaround until the root cause is properly addressed in TipTap core.

The good news about this workaround actually resolving the problem is that the actual definitive solution is really simple: just make core dependencies fixed version and republish TipTap. I think having fixed dependency versions is good practice anyway, gives the publisher full control over them.

Even allowing patches can turn sour, as there is a gap between the publisher testing the package and users installing it on their machine, and if an incompatible patch in the dependency has been published in the meanwhile, there will be bugs and bug reports that could have been avoided.

@tgv1975 Yes, I tested this before posting. As long as your restricted prosemirror dependencies (in the host app’s package.json) fall into the wider version ranges used by tiptap, npm should only install each prosemirror dependency once (in the main node_modules folder). If the version ranges didn’t match, then each tiptap dependency would get its own prosemirror versions in e.g. node_modules/@tiptap/core/node_modules, and the workaround wouldn’t work.

Note: I tested this with npm 6 and 7, not sure if it also works with 8.

But I agree, this is only a workaround until the issue is fixed properly.

@benkroeger I discussed and validated it with @bdbch on the weekend via Discord. The types are correct, but something went wrong in the release which lead to the wrong types being included. They will solve it with a new release for the relevant packages 🙂

EDIT: The problems are in the extension-bubble-menu and extension-floating-menu packages.

I’ve seen a similar error with prosemirror-codemark - which is related to a mix of ESM and UMD builds. TLDR: When a dependency is UMD build and your project uses ESM builds, prosemirror-state is loaded twice (at lease during development e.g. with vite) - once from prosemirror-state’s esm path and once from prosemirror-state’s umd path

BOSS @NeoDobby @tgv1975 - this was impacting v1 also! - thanks for sharing the above!!! 👍🏻

but your above notes allowed me to trace the different package dependencies

Sub Modules

• “tiptap”: “1.31.0”, https://github.com/ueberdosis/tiptap/blob/tiptap%401.31.0/packages/tiptap/package.json
  • “tiptap-commands”: “^1.16.0”, https://github.com/ueberdosis/tiptap/blob/tiptap-commands%401.16.0/packages/tiptap-commands/package.json
    • “tiptap-utils”: “^1.12.0” https://github.com/ueberdosis/tiptap/blob/tiptap-utils%401.12.0/packages/tiptap-utils/package.json
  • “tiptap-utils”: “^1.12.0” https://github.com/ueberdosis/tiptap/blob/tiptap-utils%401.12.0/packages/tiptap-utils/package.json
• “tiptap-extensions”: “1.34.0”, https://github.com/ueberdosis/tiptap/blob/tiptap-extensions%401.34.0/packages/tiptap-extensions/package.json
  • “tiptap”: “^1.31.0”, https://github.com/ueberdosis/tiptap/blob/tiptap%401.31.0/packages/tiptap/package.json
  • “tiptap-commands”: “^1.16.0”, https://github.com/ueberdosis/tiptap/blob/tiptap-commands%401.16.0/packages/tiptap-commands/package.json
  • “tiptap-utils”: “^1.12.0” https://github.com/ueberdosis/tiptap/blob/tiptap-utils%401.12.0/packages/tiptap-utils/package.json

to then dedupe and create a what appears to be working overwrite in the package.json!!!

	"overrides": {
		"prosemirror-collab": "1.2.2",
		"prosemirror-commands": "1.1.4",
		"prosemirror-dropcursor": "1.3.2",
		"prosemirror-gapcursor": "1.1.5",
		"prosemirror-history": "1.1.3",
		"prosemirror-inputrules": "1.1.3",
		"prosemirror-keymap": "1.1.4",
		"prosemirror-model": "1.13.1",
		"prosemirror-schema-list": "1.1.4",
		"prosemirror-state": "1.3.3",
		"prosemirror-tables": "1.1.1",
		"prosemirror-transform": "1.2.8",
		"prosemirror-utils": "0.9.6",
		"prosemirror-view": "1.16.5"
	}

the above override idea may also have been a great solution for this one: https://github.com/ueberdosis/tiptap/issues/577

Thanks for this issue! We’ll make sure to work on a port to the new Typescript version ASAP so we don’t need workarounds here. I’ll discuss this in the team and reproritize issues.

Thanks @benkroeger for letting me know. I think we still should improve the dependency management and versioning for tiptap to make it easier to find potential incompatibilities faster!

well, apparently - since I don’t have @tiptap/core listed as a dependency explicitly - npm chose to install the cached one… beta.174 while there was already beta.181 out there. beta.181 does fix the issues. I’m very sorry for the confusion. Issue is solved for me as well.

@bdbch issue can be closed again 😃

@christian-kolb @bdbch I can confirm that my build now runs without errors with latest packages, thank you!

Personally, I just ran into this with the extensions that are using prosemirror-state’s Plugin interface:

ERROR in ROOT_DIR/node_modules/@tiptap/extension-bubble-menu/dist/packages/extension-bubble-menu/src/bubble-menu-plugin.d.ts(43,76):
43:76 Generic type 'Plugin<PluginState>' requires between 0 and 1 type arguments.
    41 |     destroy(): void;
    42 | }
  > 43 | export declare const BubbleMenuPlugin: (options: BubbleMenuPluginProps) => Plugin<any, any>;
       |                                                                            ^
    44 | 
ERROR in ROOT_DIR/node_modules/@tiptap/extension-floating-menu/dist/packages/extension-floating-menu/src/floating-menu-plugin.d.ts(40,80):
40:80 Generic type 'Plugin<PluginState>' requires between 0 and 1 type arguments.
    38 |     destroy(): void;
    39 | }
  > 40 | export declare const FloatingMenuPlugin: (options: FloatingMenuPluginProps) => Plugin<any, any>;
       |                                                                                ^
    41 | 
Version: typescript 4.4.3

Latest Tiptap versions:

		"@tiptap/core": "2.0.0-beta.180",
		"@tiptap/extension-bold": "2.0.0-beta.28",
		"@tiptap/extension-bullet-list": "2.0.0-beta.29",
		"@tiptap/extension-italic": "2.0.0-beta.28",
		"@tiptap/extension-link": "2.0.0-beta.42",
		"@tiptap/extension-list-item": "2.0.0-beta.23",
		"@tiptap/extension-mention": "2.0.0-beta.101",
		"@tiptap/extension-ordered-list": "2.0.0-beta.30",
		"@tiptap/extension-paragraph": "2.0.0-beta.26",
		"@tiptap/extension-text-align": "2.0.0-beta.31",
		"@tiptap/extension-underline": "2.0.0-beta.25",
		"@tiptap/starter-kit": "2.0.0-beta.189",
		"@tiptap/vue-2": "2.0.0-beta.83",

Note that I do not explicitly import Prosemirror anywhere in my project, but I current have the most recent prosemirror-state:

prosemirror-state@1.4.1

I think so! We could do some evaluations and testing on how to make this whole dependency list easier to match up. We also thought about a different versioning model (for example having all tiptap-packages matched to one version instead of independent versions) but we won’t change this until we’re hitting 2.0.0.

Right now I’d suggest to use the latest prosemirror and tiptap packages @christian-kolb - I guess you tried that already, what issues did you run into?