Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
superfreddialpad opened this issue Jun 2, 2023 · 16 comments · Fixed by #8511
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. has PR A pull request has already been submitted to solve the issue scope: compiler scope: script-setup

Comments

@superfreddialpad
Copy link

superfreddialpad commented Jun 2, 2023

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

@justin-schroeder
Copy link

Pretty sure this is a duplicate of #8468

@edison1105 edison1105 reopened this Jun 7, 2023
@edison1105
Copy link
Member

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

@sxzz 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
@Trandx
Copy link

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

@amritk
Copy link

amritk commented Dec 4, 2023

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

@yyx990803
Copy link
Member

@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.

@yyx990803 yyx990803 reopened this Dec 4, 2023
@adampolyanskiy
Copy link

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
Copy link

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

@ClementNerma
Copy link

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

export type Test<T> = T

@Trandx
Copy link

Trandx commented Jun 9, 2024 via email

@vkrepkiy
Copy link

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
Copy link

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
Copy link

Trandx commented Jun 20, 2024 via email

@Sinled
Copy link

Sinled commented Jul 24, 2024

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

@pavlo-hadzheha
Copy link

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
Copy link

juni0r commented 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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. has PR A pull request has already been submitted to solve the issue scope: compiler scope: script-setup
Projects
None yet
Development

Successfully merging a pull request may close this issue.