nuxt / icon

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

error TS2339: Property 'nuxtIcon' does not exist on type 'AppConfig' #62

Closed frasza closed 1 year ago

frasza commented 1 year ago

Recently upgraded Nuxt Icon in my SPA Nuxt app (using Nuxt 3.3 with SSR set to false and strict typescript) and hit a bug when running npm run generate.

 node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6:28 - error TS2339: Property 'nuxtIcon' does not exist on type 'AppConfig'.

6 const aliases = appConfig?.nuxtIcon?.aliases || {}
                             ~~~~~~~~

node_modules/nuxt-icon/dist/runtime/Icon.vue:11:28 - error TS2339: Property 'nuxtIcon' does not exist on type 'AppConfig'.

11 const aliases = appConfig?.nuxtIcon?.aliases || {}
                              ~~~~~~~~

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:25:39 - error TS2339: Property 'nuxtIcon' does not exist on type 'AppConfig'.

25   if (!props.size && typeof appConfig.nuxtIcon?.size === 'boolean' && !appConfig.nuxtIcon?.size) {
                                                                                    ~~~~~~~~

node_modules/nuxt-icon/dist/runtime/Icon.vue:28:44 - error TS2339: Property 'nuxtIcon' does not exist on type 'AppConfig'.

28 const iconName = computed(() => (appConfig.nuxtIcon?.aliases || {})[props.name] || props.name)
                                              ~~~~~~~~

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:28:40 - error TS2339: Property 'nuxtIcon' does not exist on type 'AppConfig'.

28   const size = props.size || appConfig.nuxtIcon?.size || '1em'
                                          ~~~~~~~~

Found 6 errors in 2 files.

Errors  Files
     4  node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6
     2  node_modules/nuxt-icon/dist/runtime/Icon.vue:11

Created minimal reproduction and posted code on public github repo available here: https://github.com/frasza/nuxt-icon-m-repro-bug

CosAnca commented 1 year ago

This still seems to be an issue, except this time the errors are on properties of the nuxtIcon instead of the nuxtIcon object.

node_modules/nuxt-icon/dist/runtime/Icon.vue:12:38 - error TS2339: Property 'aliases' does not exist on type '{}'.

12 const aliases = appConfig?.nuxtIcon?.aliases || {}
                                        ~~~~~~~

node_modules/nuxt-icon/dist/runtime/Icon.vue:29:54 - error TS2339: Property 'aliases' does not exist on type '{}'.

29 const iconName = computed(() => (appConfig.nuxtIcon?.aliases || {})[props.name] || props.name)
                                                        ~~~~~~~

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:7:38 - error TS2339: Property 'aliases' does not exist on type '{}'.

7 const aliases = appConfig?.nuxtIcon?.aliases || {}
                                       ~~~~~~~

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:26:49 - error TS2339: Property 'size' does not exist on type '{}'.

26   if (!props.size && typeof appConfig.nuxtIcon?.size === 'boolean' && !appConfig.nuxtIcon?.size) {
                                                   ~~~~

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:26:92 - error TS2339: Property 'size' does not exist on type '{}'.

26   if (!props.size && typeof appConfig.nuxtIcon?.size === 'boolean' && !appConfig.nuxtIcon?.size) {
                                                                                              ~~~~

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:29:50 - error TS2339: Property 'size' does not exist on type '{}'.

29   const size = props.size || appConfig.nuxtIcon?.size || '1em'
                                                    ~~~~

Found 6 errors in 2 files.

Errors  Files
     2  node_modules/nuxt-icon/dist/runtime/Icon.vue:12
     4  node_modules/nuxt-icon/dist/runtime/IconCSS.vue:7

It can be reproduced with the repo linked in the original issue by upgrading the dependencies to latest versions:

"devDependencies": {
    "nuxt": "^3.5.0",
    "nuxt-icon": "^0.4.1"
  },
  "dependencies": {
    "typescript": "^5.0.4",
    "vue-tsc": "^1.6.5"
  }
some-user123 commented 1 year ago

I'm getting the same errors when building. However, they are not reported when using nuxt typecheck 😯

mandragora-hub commented 1 year ago

Errors still persist with updated packages. image

image

In dev, it works as expected. The bugs emerge on a build step. This only occurs if you have typecheck in true image

Reprodution => https://github.com/mandragora-hub/nuxt-icon-repro-build-bug