[Bug]: defineProps<NodeViewProps> stopped working

[volarname]

Affected Packages

core, vue-3

Version(s)

2.7.0,2.7.1,2.7.2

Bug Description

this worked before, also it was on documentation before, now it doesn't

import { NodeViewContent, NodeViewWrapper, type NodeViewProps as TiptapNodeViewProps } from '@tiptap/vue-3'

interface Props extends TiptapNodeViewProps {}

const props = defineProps<Props>()

if this is not bug, please provide TS example how to properly type props in node view renderer in vue 3

error log from vue sfc compiler:

7:07:40 PM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

DemoView.vue
13 | import { NodeViewContent, NodeViewWrapper, type NodeViewProps as TiptapNodeViewProps } from '@tiptap/vue-3'
14 |
15 |  interface Props extends TiptapNodeViewProps {}
   |                          ^^^^^^^^^^^^^^^^^^^
16 |
17 |  const props = defineProps<Props>()
  Plugin: vite:vue
  File: /var/www/html/src/components/anzutap/nodes/styledBox/components/StyledBoxNodeView.vue
      at ScriptCompileContext.error (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveInterfaceMembers (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18204:13)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17984:14)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18038:16)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at resolveRuntimePropsFromType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19604:20)
      at extractRuntimeProps (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19580:17)
      at genRuntimeProps (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19568:18)
      at Object.compileScript (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20681:21)
7:07:40 PM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve index type into finite keys

/var/www/html/node_modules/@tiptap/core/dist/packages/core/src/types.d.ts
191|  }[keyof T];
192|  export type Simplify<T> = {
193|      [KeyType in keyof T]: T[KeyType];
   |                  ^^^^^^^
194|  } & {};
195|  export type DecorationWithType = Decoration & {
  Plugin: vite:vue
  File: /var/www/html/src/components/anzutap/nodes/embedVideo/components/EmbedVideoNodeView.vue
      at ScriptCompileContext.error (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveStringType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18336:14)
      at resolveMappedType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18228:12)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18004:14)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at /var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:31
      at Array.map (<anonymous>)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:20)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17988:14)
7:07:40 PM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve index type into finite keys

/var/www/html/node_modules/@tiptap/core/dist/packages/core/src/types.d.ts
191|  }[keyof T];
192|  export type Simplify<T> = {
193|      [KeyType in keyof T]: T[KeyType];
   |                  ^^^^^^^
194|  } & {};
195|  export type DecorationWithType = Decoration & {
  Plugin: vite:vue
  File: /var/www/html/src/components/anzutap/nodes/embedAudio/components/EmbedAudioNodeView.vue
      at ScriptCompileContext.error (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15730:11)
      at resolveStringType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18336:14)
      at resolveMappedType (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18228:12)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18004:14)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at /var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:31
      at Array.map (<anonymous>)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18000:20)
      at resolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17967:20)
      at innerResolveTypeElements (/var/www/html/node_modules/vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17988:14)

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

no compiler error as before

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.

[incutonez]

And unfortunately, reverting to 2.6.6 has its own issues, due to these lines in the vue-3 package.json (also starter-kit and pm)... because they haven't locked down the specific versions, it'll use the latest minor version, which is 2.7.2. What I ended up having to do is adding the overrides in my package.json, so it looks like this:

"overrides": {
    "@incutonez/ui": {
      "@tiptap/vue-3": {
        "@tiptap/core": "2.6.6",
        "@tiptap/extension-bubble-menu": "2.6.6",
        "@tiptap/extension-floating-menu": "2.6.6",
        "@tiptap/pm": "2.6.6"
      },
      "@tiptap/pm": {
        "@tiptap/core": "2.6.6"
      },
      "@tiptap/starter-kit": {
        "@tiptap/core": "2.6.6",
        "@tiptap/pm": "2.6.6"
      }
    }
  }

In my case, I'm using workspaces, so if you're using workspaces, rename the @incutonez/ui to whatever workspace you're using TipTap in. If you're not using workspaces, simply remove the wrapping @incutonez/ui object.