search

ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
26.41k stars 2.22k forks source link

Tiptap producing TypeScript errors during type-checking #3579

Open stryaponoff opened 1 year ago

stryaponoff commented 1 year ago

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.

Снимок экрана 2022-12-28 в 20 25 52

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?

Are you sponsoring us?

stryaponoff commented 1 year ago

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

{
  "compilerOptions": {
    "paths": {
      "@tiptap/core": [
        "node_modules/@tiptap/core/src/index"
      ]
    }
  }
}
aminya commented 1 year ago

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

stryaponoff commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Edelezi commented 1 year ago

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 commented 1 year ago

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

stryaponoff commented 1 year ago

@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 commented 1 year ago

@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 commented 7 months ago

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

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

In case anyone has the same problem 😃