Build failing - error TS2320: Interface 'Element' cannot simultaneously extend types....

[parmindersk]

Describe the bug

Node: v20.11.1
pnpm: 9.11.0
Mac: MacOS 15.3.1

Cloned repo on Feb 20, 2025.

pnpm build fails with the following error.

> [email protected] build
> vue-tsc --noEmit && NODE_OPTIONS=--max_old_space_size=4096 vite build

node_modules/.pnpm/[email protected]/node_modules/vue/jsx.d.ts:12:22 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'key' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

12     export interface Element extends VNode {}
                        ~~~~~~~

node_modules/.pnpm/[email protected]/node_modules/vue/jsx.d.ts:12:22 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'props' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

12     export interface Element extends VNode {}
                        ~~~~~~~

node_modules/.pnpm/[email protected]/node_modules/vue/jsx.d.ts:12:22 - error TS2320: Interface 'Element' cannot simultaneously extend types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>'.
  Named property 'type' of types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'ReactElement<any, any>' are not identical.

12     export interface Element extends VNode {}
                        ~~~~~~~

node_modules/.pnpm/[email protected]/node_modules/vue/jsx.d.ts:19:22 - error TS2430: Interface 'IntrinsicElements' incorrectly extends interface 'NativeElements'.
  Types of property 'a' are incompatible.
    Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes & ReservedProps'.
      Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'AnchorHTMLAttributes'.
        Types of property 'style' are incompatible.
          Type 'CSSProperties' is not assignable to type 'StyleValue'.
            Type 'Properties<string | number, string & {}>' is missing the following properties from type 'StyleValue[]': length, pop, push, concat, and 27 more.

19     export interface IntrinsicElements extends NativeElements {
                        ~~~~~~~~~~~~~~~~~

node_modules/.pnpm/[email protected]/node_modules/vue/jsx.d.ts:19:22 - error TS2590: Expression produces a union type that is too complex to represent.

19     export interface IntrinsicElements extends NativeElements {
                        ~~~~~~~~~~~~~~~~~

node_modules/.pnpm/[email protected]/node_modules/vue/jsx.d.ts:24:22 - error TS2320: Interface 'IntrinsicAttributes' cannot simultaneously extend types 'ReservedProps' and 'Attributes'.
  Named property 'key' of types 'ReservedProps' and 'Attributes' are not identical.

24     export interface IntrinsicAttributes extends ReservedProps {}
                        ~~~~~~~~~~~~~~~~~~~


Found 6 errors in the same file, starting at: node_modules/.pnpm/[email protected]/node_modules/vue/jsx.d.ts:12

 ELIFECYCLE  Command failed with exit code 2.

What happened?

A bug happened!

System information

Node: v20.11.1
pnpm: 9.11.0
Mac: MacOS 15.3.1

Where did you encounter the bug?

Public app (it-tools.tech)