nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
883 stars 41 forks source link

type errors when user is type-checking #5

Closed danielroe closed 1 year ago

danielroe commented 1 year ago

Reproduction: https://stackblitz.com/edit/github-xn5tih

 ERROR(vue-tsc)  Property 'nuxtIcon' does not exist on type 'AppConfig'.
 FILE  /project/node_modules/.pnpm/nuxt-icon@0.1.5/node_modules/nuxt-icon/dist/runtime/Icon.vue:9:33

     7 |
     8 | const nuxtApp = useNuxtApp()
  >  9 | const nuxtIcon = useAppConfig().nuxtIcon
       |                                 ^^^^^^^^
    10 | const props = defineProps({
    11 |   name: {
    12 |     type: String,

 ERROR(vue-tsc)  Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.
 FILE  /project/node_modules/.pnpm/nuxt-icon@0.1.5/node_modules/nuxt-icon/dist/runtime/Icon.vue:22:49

    20 | const state = useState('icons', () => ({}))
    21 | const isFetching = ref(false)
  > 22 | const icon = computed<IconifyIcon | null>(() => state.value?.[props.name])
       |                                                 ^^^^^^^^^^^^^^^^^^^^^^^^^
    23 | const component = computed(() => nuxtApp.vueApp.component(props.name))
    24 | const sSize = computed(() => {
    25 |   const size = props.size || nuxtIcon?.size || '1em'

 ERROR(vue-tsc)  Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.
 FILE  /project/node_modules/.pnpm/nuxt-icon@0.1.5/node_modules/nuxt-icon/dist/runtime/Icon.vue:36:8

    34 |     return
    35 |   }
  > 36 |   if (!state.value?.[props.name]) {
       |        ^^^^^^^^^^^^^^^^^^^^^^^^^
    37 |     isFetching.value = true
    38 |     state.value[props.name] = await loadIcon(props.name).catch(() => {})
    39 |     isFetching.value = false

 ERROR(vue-tsc)  Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.
 FILE  /project/node_modules/.pnpm/nuxt-icon@0.1.5/node_modules/nuxt-icon/dist/runtime/Icon.vue:38:5

    36 |   if (!state.value?.[props.name]) {
    37 |     isFetching.value = true
  > 38 |     state.value[props.name] = await loadIcon(props.name).catch(() => {})
       |     ^^^^^^^^^^^^^^^^^^^^^^^
    39 |     isFetching.value = false
    40 |   }
    41 | }

[vue-tsc] Found 4 errors. Watching for file changes.
Atinux commented 1 year ago

Thank you @danielroe

It's weird since I declared the nuxtIcon types on https://github.com/nuxt-modules/icon/blob/main/src/module.ts#L8

Regarding the types for state, I am more than happy to get your help on typings, definitely not a TS expert on my side 😅

Atinux commented 1 year ago

Created the https://github.com/nuxt-modules/icon/tree/fix/ts-check branch and setup the playground, but cannot get the nuxtIcon error 🤔

DNA commented 1 year ago

There's an app.config.ts on your branch that doesn't exists on the issue's stackblitz. Maybe it's missing some default values?

some-user123 commented 1 year ago

I'm seeing the same problem when enabling typecheck in nuxt.config.ts and running `nuxt dev:

 ERROR(vue-tsc)  Property 'nuxtIcon' does not exist on type 'AppConfig'.
 FILE  .../node_modules/.pnpm/nuxt-icon@0.3.3/node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6:28

    4 |                                                                                                                             12:32:15
    5 | const appConfig = useAppConfig()
  > 6 | const aliases = appConfig?.nuxtIcon?.aliases || {}
      |                            ^^^^^^^^
    7 |
    8 | type AliasesKeys = keyof typeof aliases
    9 |

 ERROR(vue-tsc)  Property 'nuxtIcon' does not exist on type 'AppConfig'.
 FILE  .../node_modules/.pnpm/nuxt-icon@0.3.3/node_modules/nuxt-icon/dist/runtime/Icon.vue:11:28

     9 | const nuxtApp = useNuxtApp()
    10 | const appConfig = useAppConfig()
  > 11 | const aliases = appConfig?.nuxtIcon?.aliases || {}
       |                            ^^^^^^^^
    12 |
    13 | type AliasesKeys = keyof typeof aliases
    14 |

 ERROR(vue-tsc)  Property 'nuxtIcon' does not exist on type 'AppConfig'.
 FILE  .../node_modules/.pnpm/nuxt-icon@0.3.3/node_modules/nuxt-icon/dist/runtime/IconCSS.vue:25:39

    23 | const sSize = computed(() => {
    24 |   // Disable size if appConfig.nuxtIcon.size === false
  > 25 |   if (!props.size && typeof appConfig.nuxtIcon?.size === 'boolean' && !appConfig.nuxtIcon?.size) {
       |                                       ^^^^^^^^
    26 |     return undefined
    27 |   }
    28 |   const size = props.size || appConfig.nuxtIcon?.size || '1em'
...

Do you need a reproduction?