Skip to content

Can't use generic prop type when definition includes intersection with generic params? #8482

New issue
New issue
Open
#8511
Open
Can't use generic prop type when definition includes intersection with generic params?#8482
#8511
Labels
🍰 p2-nice-to-havePriority 2: this is not breaking anything but nice to have it addressed.has PRA pull request has already been submitted to solve the issuescope: compilerscope: script-setup
@superfreddialpad

Description

@superfreddialpad
superfreddialpad
opened on Jun 2, 2023 · edited by superfreddialpad

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqFUbFOwzAQ/ZWTBwJSaRamNI3EgsSGRMXkJW6urYXjs2ynVRTl3zmHQCMGOtnne/feu+dBPDu3PncoClGGvdcuQsDYOTC1PW6liEGKSloA3TryEV6IXiO2cPDUQrbO5zpRZAm2JxsiHIhgC0M6C3hagap9AdkJjaFsBTp86KCVwQKi7xDGjbTSlvm3PqtxwZzO1BEn7fJH9fyotG3YFhNLATl3y3wB5TLE3qSroqaHIU2rev959NTZpgBluGC5ZNQQm7qcdMTpYZwszNNiJRab3Qgn9g5TMNeVbdcq9JvEOTXfqcU3Ty6Uu4pRO7hj5CIGRWSwtgkvbYMHbWf4dZD5q+r+4f+cGn3mjMKJLuzul59Nzh8y2YNxLHNG/g1PjF+nxbYT

Steps to reproduce

type Foo = { foo: number; }
type SomeProps<T> = T & { isVisible: boolean }

What is expected?

this should be valid typescript:

https://www.typescriptlang.org/play?#code/C4TwDgpgBAYg9nKBeKBvKAzBAuKA7AVwFsAjCAJygF8AoUSKAZTiIgAVy4wBnAHgBUAfMij8oAMjRQAltwBqs6SQA2EXCQSqAhnmo0AxnDzdgmHExbtOPXvDjCU6LHFwBmADQz5ilWqjByAmgqAG4aaQwoAApnADpZBW4lVQBKKENjOFVY5TgAcxiEFJCgA

What is actually happening?

compile error:

1:55:02 AM [vite] Internal server error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

/testdir/src/FooItem.vue
1  |  <script setup lang="ts">
2  |  type Foo = { foo: number }
3  |  type SomeProps<T> = T & { isVisible: boolean }
   |                      ^
4  |
5  |  defineProps<SomeProps<Foo>>()
  Plugin: vite:vue
  File: /testdir/src/FooItem.vue
      at ScriptCompileContext.error (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15841:11)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17966:20)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at /testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17924:31
      at Array.map (<anonymous>)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17924:20)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17947:16)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at resolveRuntimePropsFromType (/testdir/node_modules/.pnpm/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19312:20)

System Info

  System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 44.49 GB / 64.00 GB
    Shell: 5.1.4 - /usr/local/bin/bash
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Chrome Canary: 116.0.5806.0
    Firefox: 111.0
    Safari: 15.1
    Safari Technology Preview: 15.4
  npmPackages:
    vue: ^3.3.2 => 3.3.4

Any additional comments?

I'm not actually sure if I'm characterizing this correctly, but it seems like the sfc compiler cannot handle props whose type intersects one of its own generic parameters.

full pnpm lockfile if that's useful: https://gist.github.com/superfreddialpad/248efe40250d772938f31a2440e54e35

Activity

justin-schroeder

justin-schroeder commented on Jun 6, 2023

@justin-schroeder
justin-schroeder
on Jun 6, 2023

Pretty sure this is a duplicate of #8468

edison1105
closed this as completedon Jun 7, 2023
edison1105
reopened this on Jun 7, 2023
edison1105

edison1105 commented on Jun 7, 2023

@edison1105
edison1105
on Jun 7, 2023
Member

@justin-schroeder They're not exactly the same.

edison1105
added
scope: compiler
scope: script-setup
on Jun 7, 2023
edison1105
mentioned this on Jun 7, 2023
sxzz
added
has PRA pull request has already been submitted to solve the issue
🍰 p2-nice-to-havePriority 2: this is not breaking anything but nice to have it addressed.
on Jun 11, 2023
edison1105
mentioned this on Aug 17, 2023
sevilyilmaz

sevilyilmaz commented on Oct 23, 2023

@sevilyilmaz
sevilyilmaz
on Oct 23, 2023

I get the same error when I use an imported type as an alias. I'm not 100% sure if these errors are related.

<script setup lang="ts">
import type * as T from './Foo.types'
defineProps<T.Props>()
</script>

Here is the link for reproduction: https://play.vuejs.org/#eNqFU8lu2zAQ/ZUBL24LVz6kJ0UJ0BYpkB7aoDV64kXLWGZCkQSH8gJD/94hJTtCUTgncRZy3jI6ic/OZbseRS4Kqr1yAQhD70CXpr2TIpAU99IAqM5ZH+CbtY8BO9h428EiW01xfGIR22prKMDGWriDU/zm8GkJVelzWGxRa7tYgqI/ilSlMYfge4ThVhppitU4n6dxwG86XQZMs4vz1N3HSpmGYfHDUsCKq8Vq1sohhaOOx8o2RzjF21VZv7Te9qbJodIc8LgIVFsGtd+qgCkxJAjTbbEUM2ZviDNJE44O4QOUBOu5PFnME4sjTYMbZfDJW0fFOkvf+3fvr1Nv1I5p09bueeBFOZ47aZxEhmEoVtz5rx5MIxBbslFt9kzWMJEkiRS17ZzS6H+6oNgyKfJRrFgr2ab995SL/izP+XqL9ct/8s90iDkpnjwS+h2ju9RC6VsMY/nh9w888PlS7GzTRy5Xir+QrO4jxrHtC9vIsGd9Ce1jskCZdk0Ph4CGzqQi0ORu6peC3fx6hfor3JvsZtqKYVyG0ccsEIuIh1fHk41p22d7XVmrsTS34x9AwTM03nMx/AVHMyjZ

amritk
mentioned this on Oct 23, 2023
yyx990803
closed this as completedin #8511on Dec 1, 2023
yyx990803
added a commit that references this issue on Dec 1, 2023

fix(compiler-sfc): support inferring generic types (#8511)

eb5e307
Trandx

Trandx commented on Dec 4, 2023

@Trandx
Trandx
on Dec 4, 2023

Hello !!
I have done pnpm update after your update but, i always have the same error.

this is my code

`export default interface IDynamicSelectInput<E, K, L>{

//props: PropsType & L;
props: PropsType & L
emits: EmitsType;
}`

this is error

`[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

/home/trandx/dev/Nucle-x/sso/_mono/packages/ui/src/components/atoms/list/index.ts
11 | //(event: "change", elt: OptionsType | OptionsType[] ): void;
12 | //(event: 'remove'): void
13 | } & T;
| ^
14 |
15 | type optionFormatType = { name: string; value: valType };`

2 remaining items

yyx990803
reopened this on Dec 4, 2023
adampolyanskiy

adampolyanskiy commented on Dec 20, 2023

@adampolyanskiy
adampolyanskiy
on Dec 20, 2023

I am not sure if it is connected, but I have simillar problem even after updating from 3.3.4 to 3.3.13

// Those types are in a separate file and are imported into the component

export type ExtractExtraApiGetRequestParams<T extends ApiGetRequestParams> = Subtract<
  T,
  ApiGetRequestParams
>;

export type Subtract<T extends U, U> = Pick<T, Exclude<keyof T, keyof U>>;

const props = defineProps<ExtractExtraApiGetRequestParams<ApiAuditGetRequest>>();

ApiAuditGetRequest extends ApiGetRequestParams.

And I am getting:
[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

Threebow
mentioned this on Feb 2, 2024
adambiggs

adambiggs commented on Apr 24, 2024

@adambiggs
adambiggs
on Apr 24, 2024

We ran into this when trying to use zod type inference.

ClementNerma

ClementNerma commented on Jun 8, 2024

@ClementNerma
ClementNerma
on Jun 8, 2024

I still have problems with generic on the latest version. Even the simple following code fails to compile:

export type Test<T> = T
Trandx

Trandx commented on Jun 9, 2024

@Trandx
Trandx
on Jun 9, 2024 via email
vkrepkiy

vkrepkiy commented on Jun 17, 2024

@vkrepkiy
vkrepkiy
on Jun 17, 2024

I tried to re-use vuetify component's props type FormInputProps = VTextField['$props'] and as under the hood Vuetify exports via InstanceType<typeof VTextField>, also ended up with error [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

version 3.4.29

rcomesan

rcomesan commented on Jun 20, 2024

@rcomesan
rcomesan
on Jun 20, 2024

I'm also getting the same error when trying to import an inferred zod type
[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

import { z } from 'zod';

export const EmailVerificationViewPropsSchema = z.object({
  initialStage: z.enum(['send', 'resend', 'verify', 'changeEmail']),
  email: z.string().email(),
});

export type EmailVerificationViewProps = z.infer<typeof EmailVerificationViewPropsSchema>;

I'm importing it inside script setup:

<script setup lang="ts">
import type { EmailVerificationViewProps } from './view-props';

const props = defineProps<EmailVerificationViewProps>();

/* ... */
</script>
Trandx

Trandx commented on Jun 20, 2024

@Trandx
Trandx
on Jun 20, 2024 via email
Sinled

Sinled commented on Jul 24, 2024

@Sinled
Sinled
on Jul 24, 2024

Any updates here? I am having this problem when importing InferType from yup

pavlo-hadzheha

pavlo-hadzheha commented on Aug 1, 2024

@pavlo-hadzheha
pavlo-hadzheha
on Aug 1, 2024

I get a similar error when using prop extraction from the element-plus library.

<template>
  <ElButton v-bind="$props" :icon>
    <slot />
  </ElButton>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'

type TElButtonProps = InstanceType<typeof ElButton>['$props'];

const props = defineProps<TElButtonProps & {
  awesomeIcon?: IconDefinition
}>()

const GenericIconComponent = resolveComponent('Icon')

const icon = h(GenericIconComponent, { name: props.awesomeIcon })
</script>
juni0r

juni0r commented on Sep 26, 2024

@juni0r
juni0r
on Sep 26, 2024

We massively rely on inferred types from zod schemas and run into this issue. Is this a design limitation of @vue/compiler-sfc or something that can be fixed?

MuhammadM1998
mentioned this on Jan 31, 2025
arthurseredaa

arthurseredaa commented on Jun 5, 2025

@arthurseredaa
arthurseredaa
on Jun 5, 2025 · edited by arthurseredaa

Hi! I'm also getting error while use zod inference in vue setup
[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

types.ts

export const PageSchemaZ = z.object({
  title: z.string(),
  subtitle: z.string(),
});

export type PageSchema = z.infer<typeof PageSchemaZ>;

SomePage.vue

<script setup lang="ts">
import type { PageSchema } from "./types";
...
const props = defineProps<PageSchema>();
...
</script>

Is there any workaround? It seem like current workaround is just manually create types based on zod schema, but that's not the best approach

imyourm8

imyourm8 commented on Jun 15, 2025

@imyourm8
imyourm8
on Jun 15, 2025

Problem still persists with inferred types from zod schema.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    🍰 p2-nice-to-havePriority 2: this is not breaking anything but nice to have it addressed.has PRA pull request has already been submitted to solve the issuescope: compilerscope: script-setup

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @juni0r@sevilyilmaz@yyx990803@adambiggs@imyourm8

      Issue actions
        Can't use generic prop type when definition includes intersection with generic params? · Issue #8482 · vuejs/core