Getting error then importing type InputProps after update to v3.1

[Artemiy111]

Environment

• Operating System: Windows_NT
• Node Version: v22.12.0
• Nuxt Version: 3.16.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.9
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, app, css, runtimeConfig, build, future, experimental, compatibilityDate, telemetry, eslint
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @pinia/[email protected], @pinia/[email protected], @vueuse/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.1

Reproduction

https://codesandbox.io/p/devbox/stoic-mopsa-t44pzq

<script setup lang="ts">
import type { InputProps, InputEmits } from '@nuxt/ui'
import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'

const props = defineProps<Omit<InputProps, 'type'>>()
const emit = defineEmits<InputEmits>()
const model = defineModel<string>()
const show = defineModel<boolean>('show', { default: false })
</script>

<template>
  <UInput
    v-bind="props"
    v-model="model"
    :type="show ? 'text' : 'password'"
    @blur="emit('blur', $event)"
    @change="emit('change', $event)"
  >
    <template #trailing>
      <button
        type="button"
        :aria-label="show ? 'Спрятать Текст' : 'Показать текст'"
        :aria-pressed="show"
        @click="show = !show"
      >
        <EyeOffIcon
          v-if="show"
          :size="20"
        />
        <EyeIcon
          v-else
          :size="20"
        />
      </button>
    </template>
  </UInput>
</template>

Description

It was working as intended before update.

Additional context

No response

Logs

ERROR  Internal server error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type  
                          21:50:46

D:/projects/biplane-shop/app/src/shared/ui/kit/input-password/InputPassword.vue
3  |  import { EyeIcon, EyeOffIcon } from 'lucide-vue-next'
4  |
5  |  const props = defineProps<Omit<InputProps, 'type'>>()
   |                                 ^^^^^^^^^^
6  |  const emit = defineEmits<InputEmits>()
7  |  const model = defineModel<string>()
  Plugin: vite:vue
  File: D:/projects/biplane-shop/app/src/shared/ui/kit/input-password/InputPassword.vue
      at ScriptCompileContext.error (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:19741:11)
      at innerResolveTypeElements (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22104:20)
      at resolveTypeElements (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:21995:20)
      at resolveBuiltin (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22399:13)  
      at innerResolveTypeElements (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:22086:20)
      at resolveTypeElements (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:21995:20)
      at resolveRuntimePropsFromType (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:23632:20)
      at extractRuntimeProps (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:23608:17)
      at genRuntimeProps (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:23596:18) 
      at Object.compileScript (D:\projects\biplane-shop\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:24709:21)

[zAlweNy26]

Same thing, but for ButtonProps

[harkor]

Same for every components I think ?
I have an issue with CheckboxProps too

[albertcito]

Same here with FormField type:

ERROR  Internal server error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type                                                            9:22:15 AM

/nuxt-monorepo/packages/ui/components/form/group/index.vue
5  |  import appConfig from 'ui/util/appConfig';
6  |  
7  |  export type FormGroupProps = FormFieldProps & UiProps & {
   |                               ^^^^^^^^^^^^^^
8  |    disabled?: boolean,
9  |    readonly?: boolean,

ERROR  Pre-transform error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type                                                              9:22:15 AM

/nuxt-monorepo/packages/ui/components/form/group/index.vue
16 |  });
17 |  const formErrors = inject<Ref<FormError[]> | null>('form-errors', null);
18 |  const error = computed(() => (formErrors?.value?.find((e) => e.name === props.name)?.message));
   |                                      ^^^^^^^^^^^^^^
19 |  const ui = computed(() => getGroupUi({
20 |    variant: props.config

[G-Cyrille]

I had the same problem for ButtonProps, this worked for me :

import type { ButtonProps as UButtonProps } from "@nuxt/ui";

interface Props extends /* @vue-ignore */ UButtonProps {
  isPrimaryAction?: boolean;
}

const props = defineProps<Props>();

I still believe this should be fixed as nuxi/ui docs seems to indicate it should work.

[harkor]

Ignoring the error is a temporary solution but yeah, it's need to be fixed.

I'll try to find what's going on between v3.0.2 and v3.1.0

[hanneskuettner]

Looks like it might have something to do with the switch of @nuxt/module-builder to 1.0.0. This is a very similar sounding issue in their repo nuxt/module-builder#597

[benjamincanac]

This could be fixed by #4023. You can try this version: https://pkg.pr.new/@nuxt/ui@df83ab3, can you confirm?

[harkor]

@benjamincanac thanks for your PR but don't work on my side. Same error

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

.../app/components/ui/forms/Checkbox.vue
1  |  <script setup lang="ts">
2  |  import type { CheckboxProps } from "@nuxt/ui";
3  |  const props = defineProps<CheckboxProps>();
   |                            ^^^^^^^^^^^^^
4  |  
5  |  const ui: CheckboxProps["ui"] = {

[benjamincanac]

I'm having a hard-time reproducing this, when downloading the sandbox @Artemiy111 it seems the lockfile is broken but besides that everything works fine 😬

[benjamincanac]

Do you all have [email protected] and [email protected] installed in your devDependencies?

[albertcito]

I just installed

"@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@df83ab3",

"typescript": "5.8.3",
"vue-tsc": "2.0.10"

I'm getting the same error

Pre-transform error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type
export type FormGroupProps = FormFieldProps & UiProps &

[hanneskuettner]

@benjamincanac can you observe the error in this code sandbox when running pnpm run dev? https://codesandbox.io/p/devbox/clever-lake-c462fw

This is the @nuxt/ui default sandbox where I just try to import the ButtonProps in the app.vue.

I've installed vue-tsc and typescript with the version you mentioned above, but it does not change the behavior.

The same project works with @nuxt/[email protected], see https://codesandbox.io/p/devbox/gracious-https-84vh6c

[benjamincanac]

No I don't actually, I just ran your sandbox and everything looks fine 🤔

[hanneskuettner]

I see the error when running pnpm dev in a terminal, so when the sfc compiler runs. I'm not seeing any errors in the editor either.

(Currently on mobile, otherwise I'd share a screenshot as well)

[benjamincanac]

It's just a test, I don't have high hopes for this but can you try https://pkg.pr.new/@nuxt/ui@9b17c66? 😬

[albertcito]

I got the same issue trying https://pkg.pr.new/@nuxt/ui@9b17c66

The issue occurs when you execute npm run dev go to localhost:3000 it displays the issue:

Pre-transform error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

[albertcito]

I create a minimal reproduction here too: https://stackblitz.com/~/github.com/albertcito/ui-3-error?file=app/pages/index.vue&file=app/components/form/group/index.vue

[hanneskuettner]

I've updated the Code Sandbox to have a running pnpm dev task you should be able to see it.

This is the output, which is same as I'm observing locally when running the dev server.

Additionally here is a blank nuxt starter StackBlitz that just has @nuxt/ui installed and tries to use an imported type. https://stackblitz.com/edit/github-hdv1fzks?file=app.vue

[Dodobibi]

For resolving this issue, it maybe necessary to extract types (ButtonProps, XxxProps, XxxEmits, etc...) to external TS files.

defineProps, defineEmits, etc, are typescript macros, theses macro CANNOT resolve types directly defined in (another) .vue files, unlike .ts or .d.tsfiles.

For testing, I have made a fork with extracting Button and Link Props / Emit. (because LinkProps are nested imported by Button).

@Dodobibi@be54cea 👀

I beleave that all elements defined in

<script lang="ts">...</script>

must be in ts file, and imported in

<script setup lang="ts">...</script>

After this, importing (and using it) XxxProps / XxxEmits are OK

import type { ButtonProps } from '@nuxt/ui';

const props = defineProps<ButtonProps>(); // OK !

It's just for testing, I haven't optimized imports, exports, theme, etc...
I know it makes reading or maintaining code more difficult, but macros are sometimes fickle (remenber #3124).

[benjamincanac]

@Dodobibi Did you check how the package is built? There are already .d.ts files:

https://www.npmjs.com/package/@nuxt/ui?activeTab=code

[Dodobibi]

yes, it work with ModalProps if imported with full path:

import type { ModalProps } from '@nuxt/ui/runtime/components/Modal.vue.d.ts'; // <-- full path here

const props = defineProps<ModalProps >(); // OK !

But fail with ButtonProps, because @nuxt/ui/runtime/components/Button.vue.d.ts call

import type { LinkProps } from './Link.vue'; // <-- vue, NOT .vue.d.ts (line 3 of your screenshot)

import type { ButtonProps} from '@nuxt/ui/runtime/components/Button.vue.d.ts'; // <-- full path here

const props = defineProps<ButtonProps>(); // NOT OK !

It work if we force .d.ts in source code @nuxt/ui/runtime/components/Button.vue.d.ts

import type { LinkProps } from './Link.vue.d.ts'; // <-- .d.ts

Then

import type { ButtonProps} from '@nuxt/ui/runtime/components/Button.vue.d.ts'; // <-- full path here

const props = defineProps<ButtonProps>(); // NOW OK !

But @nuxt/ui/runtime/components/Xxx.vue.d.ts was generated by vue-tsc on module build and there's no options for reference to .d.ts instead of .vue..., and this would be bad practice.

[UnSpiraTive]

Same problem after update from 3.0.1 to 3.1.1.

[sandros94]

I'm still studying this but this might be an upstream issue based on the new module-builder, which we are using since 3.1.0.

it is an issue about how declaration types are exported from the module, tho I'm also failing to use proper typescript syntax (a bit more info here)

will update as I discover things