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

superfreddialpad · 2023-06-02T06:00:04Z

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/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15841:11)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17966:20)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at /testdir/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17924:31
      at Array.map (<anonymous>)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17924:20)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at innerResolveTypeElements (/testdir/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17947:16)
      at resolveTypeElements (/testdir/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at resolveRuntimePropsFromType (/testdir/node_modules/.pnpm/@[email protected]/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

The text was updated successfully, but these errors were encountered:

justin-schroeder · 2023-06-06T18:59:38Z

Pretty sure this is a duplicate of #8468

edison1105 · 2023-06-07T00:47:31Z

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

sevilyilmaz · 2023-10-23T08:40:18Z

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

close #8482

Trandx · 2023-12-04T08:57:11Z

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 };`

amritk · 2023-12-04T18:22:57Z

Yep I also tested the latest version (3.3.10) and still have the same issue.

yyx990803 · 2023-12-04T18:54:58Z

@Trandx your code doesn't show how the interface is used in the component.

@amritk If you are still having the same error, make sure to provide the exact and complete code that is causing the error because there can be many different ways of using generics.

adampolyanskiy · 2023-12-20T07:29:03Z

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

adambiggs · 2024-04-24T18:33:25Z

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

ClementNerma · 2024-06-08T21:54:53Z

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

export type Test<T> = T

Trandx · 2024-06-09T02:52:48Z

Okay, thank you for your solution. But, I think that my issue has already resolved in the resent version that contents Typescript 5.4 Le sam. 8 juin 2024 à 22:55, Clément Nerma ***@***.***> a écrit :

…

I still have problems with generic on the latest version. Even the simple following code fails to compile: export type Test<T> = T — Reply to this email directly, view it on GitHub <#8482 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKENQXTGQCRWEHWYSAG4TY3ZGN4UJAVCNFSM6AAAAAAYX3IKCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNJWGIYDANRYGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

vkrepkiy · 2024-06-17T09:46:17Z

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 · 2024-06-20T14:14:04Z

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 · 2024-06-20T15:45:48Z

🙏 thanks Le jeu. 20 juin 2024 à 15:14, rcomesan ***@***.***> a écrit :

…

I'm also getting the same error when trying to import an inferred zod type [plugin:vite: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> — Reply to this email directly, view it on GitHub <#8482 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKENQXRWG5NGMLLBFHNMY5TZILPUHAVCNFSM6AAAAAAYX3IKCOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBQHAYTONJQHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

Sinled · 2024-07-24T16:24:58Z

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

pavlo-hadzheha · 2024-08-01T14:33:56Z

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 · 2024-09-26T10:11:04Z

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?

edison1105 closed this as completed Jun 7, 2023

edison1105 reopened this Jun 7, 2023

edison1105 added scope: compiler scope: script-setup labels Jun 7, 2023

edison1105 mentioned this issue Jun 7, 2023

fix(compiler-sfc): support infer generic type #8511

Merged

sxzz added has PR A pull request has already been submitted to solve the issue 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. labels Jun 11, 2023

edison1105 mentioned this issue Aug 17, 2023

Can't use TS generics when defining a type for defineProps #8996

Closed

amritk mentioned this issue Oct 23, 2023

Vue: Unresolvable type: TSConditionalType joe-bell/cva#232

Closed

yyx990803 closed this as completed in #8511 Dec 1, 2023

yyx990803 pushed a commit that referenced this issue Dec 1, 2023

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

eb5e307

close #8482

yyx990803 reopened this Dec 4, 2023

Threebow mentioned this issue Feb 2, 2024

Scoped style leads to error: TS7006: Parameter 'n' implicitly has an 'any' type vuejs/vue-loader#1915

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

superfreddialpad commented Jun 2, 2023 •

edited

Loading

justin-schroeder commented Jun 6, 2023

edison1105 commented Jun 7, 2023

sevilyilmaz commented Oct 23, 2023

Trandx commented Dec 4, 2023

amritk commented Dec 4, 2023

yyx990803 commented Dec 4, 2023

adampolyanskiy commented Dec 20, 2023

adambiggs commented Apr 24, 2024

ClementNerma commented Jun 8, 2024

Trandx commented Jun 9, 2024 via email

vkrepkiy commented Jun 17, 2024

rcomesan commented Jun 20, 2024

Trandx commented Jun 20, 2024 via email

Sinled commented Jul 24, 2024

pavlo-hadzheha commented Aug 1, 2024

juni0r commented Sep 26, 2024

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

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

Comments

superfreddialpad commented Jun 2, 2023 • edited Loading

Vue version

Link to minimal reproduction

Steps to reproduce

What is expected?

What is actually happening?

System Info

Any additional comments?

justin-schroeder commented Jun 6, 2023

edison1105 commented Jun 7, 2023

sevilyilmaz commented Oct 23, 2023

Trandx commented Dec 4, 2023

amritk commented Dec 4, 2023

yyx990803 commented Dec 4, 2023

adampolyanskiy commented Dec 20, 2023

adambiggs commented Apr 24, 2024

ClementNerma commented Jun 8, 2024

Trandx commented Jun 9, 2024 via email

vkrepkiy commented Jun 17, 2024

rcomesan commented Jun 20, 2024

Trandx commented Jun 20, 2024 via email

Sinled commented Jul 24, 2024

pavlo-hadzheha commented Aug 1, 2024

juni0r commented Sep 26, 2024

superfreddialpad commented Jun 2, 2023 •

edited

Loading