Subscribe on changes!

VNode type definition causes error in TypeScript 4.8

avatar
Aug 26th 2022

Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-w3uxlr?file=src/foo.ts

Steps to reproduce

  1. Create a project that uses Vue and TypeScript
  2. Add TypeScript code to this project that imports the VNode type from Vue
  3. Upgrade TypeScript to 4.8.2 (which was released yesterday)

What is expected?

Things should continue to work

What is actually happening?

TypeScript fails with the following error, due to an incorrect type definition in the VNode type:

node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1846:33 - error TS2344: Type 'HostElement' does not satisfy the constraint 'RendererElement'.

1846     transition: TransitionHooks<HostElement> | null;
                                     ~~~~~~~~~~~

  node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1828:57
    1828 export declare interface VNode<HostNode = RendererNode, HostElement = RendererElement, ExtraProps = {
                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    This type parameter might need an `extends RendererElement` constraint.


Found 1 error in node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1846

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
    Memory: 1.66 GB / 15.38 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.9.1/bin/yarn
    npm: 8.5.3 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Chromium: 104.0.5112.101
    Firefox: /home/catrope/.mozilla/firefox
Found default profile: [REDACTED]
Import done in 16.509 s
Mozilla Firefox 104.0

Any additional comments?

Setting "skipLibCheck": true in tsconfig.json works around this issue. But Vue should not ship erroneous type definitions.

avatar
Aug 26th 2022

I tried just changing the second type parameter of VNode from HostElement = RendererElement to HostElement extends RendererElement = RendererElement, but that causes a bunch of new errors, and resolving those causes more new errors, etc. What's going on seems to be not quite the same issue as https://devblogs.microsoft.com/typescript/announcing-typescript-4-8/#unconstrained-generics-no-longer-assignable-to , but related to it.

avatar
Aug 29th 2022

I found this problem too. replace file runtime-core.d.ts in line 1846 from: transition: TransitionHooks | null; to: transition: TransitionHooks | null; the error gone. I've found another 4 error in build.

avatar
Aug 30th 2022

same problem