nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.55k stars 417 forks source link

Error when importing "#ui/types" #1929

Open hotdogc1017 opened 3 days ago

hotdogc1017 commented 3 days ago

Environment

Version

v2.17.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-wvzth7?file=app.vue

Description

I want to get the type of a component option, using #ui/types as described in the docs

import {} form "#ui/types"

When I run pnpm dev I get the error:

Failed to resolve import "#ui/types" from "app.vue". Does the file exist?

Additional context

No response

Logs

No response

metkm commented 2 days ago

if you are importing types you need to add type before, so this should work

import type { BreadcrumbLink } from '#ui/types'

// or
// import { type BreadcrumbLink, type SomeOtherType } from '#ui/types'
// or everything you import is a type
// import type { BreadcrumbLink, SomeOtherType } from '#ui/types'
hotdogc1017 commented 2 days ago

if you are importing types you need to add type before, so this should work如果你正在导入类型,你需要在前面添加 type ,这样应该可以正常工作

import type { BreadcrumbLink } from '#ui/types'

// or
// import { type BreadcrumbLink, type SomeOtherType } from '#ui/types'
// or everything you import is a type
// import type { BreadcrumbLink, SomeOtherType } from '#ui/types'

Thanks for your reply. I imported it like this at first:

import { type DropdownItem } from "#ui/types/dropdown"

But the same error still occurred:

Failed to resolve import "#ui/types/dropdown" from "app.vue". Does the file exist?

When I changed it to:

import type { DropDownItem } from '#ui/types/dropdown';

The error disappeared and everything worked fine. Because I have always mixed types when importing before and never had any problems. For example, in Vue3, mixed imports work fine:

import { ref, type Ref } from 'vue';

Or

import { type ComputedRef } from 'vue';

I have provided a minimal implementation https://play.vuejs.org/#eNp9kU9PwzAMxb+KyaUgjVUITqObBGgScAA0kLjkUrVul5EmUf6MoarfHSfTxg5jt/i95/hnuWd3xozXAdmEFa6ywnhw6IMBWap2ypl3nM24Ep3R1kMPFpsR+B+DsMAGBmis7iCjD7Lbg1QKPOjOBI/1kWCllfPQuRam8cfz7BGl1PCprazPsguuinwLQ6Op8NgZW XqkCqBYXs36PjUPQ5FTlVShaBisLztdoyRw8jmDnMwiP+hnI1qJxjeiHa+cVrR3H/s5qwhXSLSvxgvC42wCyYleSXTfz0nzNuBop1dLrL6O6Cu3iRpnbxYd2jVytvd8aVv0W3v+/oIbeu9Nog+S0ifMBTotQ2Tcxu6Dqgn7IJdon9IthGo/3HzjUbndUhE0JoeU54xOEi/13+p/uNfjm9TH1cCGXym4vJ0= Can someone explain this? Thanks a lot🥹