Tiptap producing TypeScript errors during type-checking

[stryaponoff]

What’s the bug you are facing?

Hello! I'm using tiptap in my project. Recently I've tried to set up type-checking using tsc --noEmit --skipLibCheck and I've got this output in console:

node_modules/@tiptap/core/src/commands/blur.ts:14:32 - error TS2339: Property 'blur' does not exist on type 'RawCommands'.

export const blur: RawCommands['blur'] = () => ({ editor, view }) => {

It's not the only error but they all looks the same.

I think the issue is in module augmentation. We have the following interface exported from "@tiptap/core":

export interface Commands<ReturnType = any> {
}

And it's augmented in every extension:

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    blur: {
      /**
       * Removes focus from the editor.
       */
      blur: () => ReturnType,
    }
  }
}

But looks like that the interface is not augmented and resulting interface is still empty so other types are not inferred too.

Which browser was this experienced in? Are any special extensions installed?

This is not in the browser side

How can we reproduce the bug on our side?

I don't know

Can you provide a CodeSandbox?

No response

What did you expect to happen?

Tiptap should not be involved into type-checking in my project or it should not produce the errors

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[stryaponoff]

This modification inside my project's tsconfig.json solved the problem:

{
  "compilerOptions": {
    "paths": {
      "@tiptap/core": [
        "node_modules/@tiptap/core/src/index"
      ]
    }
  }
}

[aminya]

I realized that this error is caused by a version mismatch between the @tiptap packages.

[stryaponoff]

I have the same versions of tiptap packages.
Here's my package.json. Prosemirror packages are locked on the earliest versions that supports TypeScript declarations.

{
  "@tiptap/extension-bubble-menu": "^2.0.0-beta.209",
  "@tiptap/extension-code-block-lowlight": "^2.0.0-beta.209",
  "@tiptap/extension-hard-break": "^2.0.0-beta.209",
  "@tiptap/extension-link": "^2.0.0-beta.209",
  "@tiptap/extension-placeholder": "^2.0.0-beta.209",
  "@tiptap/starter-kit": "^2.0.0-beta.209",
  "@tiptap/suggestion": "^2.0.0-beta.209",
  "@tiptap/vue-3": "^2.0.0-beta.209",
  "prosemirror-commands": "~1.3.1",
  "prosemirror-dropcursor": "~1.5.0",
  "prosemirror-gapcursor": "~1.3.1",
  "prosemirror-history": "~1.3.0",
  "prosemirror-keymap": "~1.2.0",
  "prosemirror-model": "~1.18.1",
  "prosemirror-schema-list": "~1.2.2",
  "prosemirror-state": "~1.4.1",
  "prosemirror-transform": "~1.7.0",
  "prosemirror-view": "~1.29.1"
}

And here's how it's actually resolved:

yarn list v1.22.19
├─ @tiptap/core@2.0.0-beta.209
├─ @tiptap/extension-blockquote@2.0.0-beta.209
├─ @tiptap/extension-bold@2.0.0-beta.209
├─ @tiptap/extension-bubble-menu@2.0.0-beta.209
├─ @tiptap/extension-bullet-list@2.0.0-beta.209
├─ @tiptap/extension-code-block-lowlight@2.0.0-beta.209
├─ @tiptap/extension-code-block@2.0.0-beta.209
├─ @tiptap/extension-code@2.0.0-beta.209
├─ @tiptap/extension-document@2.0.0-beta.209
├─ @tiptap/extension-dropcursor@2.0.0-beta.209
├─ @tiptap/extension-floating-menu@2.0.0-beta.209
├─ @tiptap/extension-gapcursor@2.0.0-beta.209
├─ @tiptap/extension-hard-break@2.0.0-beta.209
├─ @tiptap/extension-heading@2.0.0-beta.209
├─ @tiptap/extension-history@2.0.0-beta.209
├─ @tiptap/extension-horizontal-rule@2.0.0-beta.209
├─ @tiptap/extension-italic@2.0.0-beta.209
├─ @tiptap/extension-link@2.0.0-beta.209
├─ @tiptap/extension-list-item@2.0.0-beta.209
├─ @tiptap/extension-ordered-list@2.0.0-beta.209
├─ @tiptap/extension-paragraph@2.0.0-beta.209
├─ @tiptap/extension-placeholder@2.0.0-beta.209
├─ @tiptap/extension-strike@2.0.0-beta.209
├─ @tiptap/extension-text@2.0.0-beta.209
├─ @tiptap/starter-kit@2.0.0-beta.209
├─ @tiptap/suggestion@2.0.0-beta.209
├─ @tiptap/vue-3@2.0.0-beta.209
├─ prosemirror-commands@1.3.1
├─ prosemirror-dropcursor@1.5.0
├─ prosemirror-gapcursor@1.3.1
├─ prosemirror-history@1.3.0
├─ prosemirror-keymap@1.2.0
├─ prosemirror-model@1.18.3
├─ prosemirror-schema-list@1.2.2
├─ prosemirror-state@1.4.2
├─ prosemirror-transform@1.7.0
└─ prosemirror-view@1.29.1

[michelengelen]

I do have the same issues and adding a path to "circumvent" the problem is out of the question. Could someone provide a version where this is working correctly?

[deterralba]

I had the same issue, setting all the @tiptap packages to their version 2.0.0-beta.209 in my package.json file and running npm i fixed the issue. (NB I have no prosemirror entry in my package.json)

[chaddelorean]

I'm also experiencing this issue. I get this issue even on the earlier beta versions. Adjusting the path in the tsconfig.json file does fix most of them but still getting a few. Please fix this as this is a total showstopper for us.

"@tiptap/pm": "2.0.3",
"@tiptap/react": "2.0.3",
"@tiptap/starter-kit": "2.0.3",
"react": "^17.0.1",
"webpack": "^5.76.2"

ERROR in node_modules/@tiptap/core/src/commands/blur.ts:14:32
TS2339: Property 'blur' does not exist on type 'RawCommands'.

With adjusting path:
ERROR in node_modules/@tiptap/core/src/helpers/createChainableState.ts:16:30
TS2339: Property 'filterTransaction' does not exist on type 'EditorState'.

[waveiron]

This error makes Webstorm unable to resolve most type definitions in node_modules.

[Edelezi]

Including index file from core and setting resolutions to fixed versions of prosemirror (you can check what's used in @tiptap/pm) solved the issue for me.

[GadiRiversideFM]

@stryaponoff I can't manage to solve this as you did with versions 2.0.3.
Any help here? @chaddelorean

[stryaponoff]

@GadiRiversideFM
Sorry, I'm still locked on beta, but I do not use any type augmentation now. I realized that if I change tiptap imports in my custom extensions from import { ... } from '@tiptap/core' with import type { ... } from '@tiptap/core', I don't need to replace types inside my tsconfig

[abemelek]

@GadiRiversideFM , did you ever figure out the solution? I can't seem to be able to build with 2.0.3 or any of the latest rc's

Edit: I found out why i was getting Type error: Property 'blur' does not exist on type 'RawCommands'.
I had imported Content from import { Content } from '@tiptap/core/src/types' as a type for content. Once i removed that, all the type check errors and the build error went away. Hopefully this helps someone save time.

[AlbaSS18]

Hello,
In my case, I use tiptap in Angular v16 with NgxTiptap. Here's my package.json:

"@tiptap/core": "^2.1.12",
"@tiptap/extension-image": "^2.1.12",
"@tiptap/extension-placeholder": "^2.1.12",
"@tiptap/pm": "^2.1.12",
"@tiptap/starter-kit": "2.1.12",
"ngx-tiptap": "^9.1.1",

And I get this error when I run jest:
Property 'setImage' does not exist on type 'SingleCommands'.

The problem was that I was using the type Editor in a function:

So, I removed the type and the problem was solved:

In case anyone has the same problem 😃