Typescript error converting AppConfig to a type with { nuxtConfig }

[beunerd]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch nuxt-icon@0.6.1 for the project I'm working on.

Original problem

When building my SSR nuxt app for production, I got these errors:

ℹ Building server...                                                                                 1:35:26 PM
ℹ vite v4.5.0 building SSR bundle for production...                                                  1:35:26 PM
transforming (103) ../node_modules/nuxt/dist/app/compat/capi.jsnode_modules/nuxt-icon/dist/runtime/Icon.vue:10:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.

 10 const appConfig = useAppConfig() as {
                      ~~~~~~~~~~~~~~~~~~~
 11   nuxtIcon: {
    ~~~~~~~~~~~~~
... 
 19   }
    ~~~
 20 }
    ~

  node_modules/nuxt-icon/dist/runtime/Icon.vue:11:3
    11   nuxtIcon: {
         ~~~~~~~~
    'nuxtIcon' is declared here.

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:5:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.

  5 const appConfig = useAppConfig() as {
                      ~~~~~~~~~~~~~~~~~~~
  6   nuxtIcon: {
    ~~~~~~~~~~~~~
... 
 14   }
    ~~~
 15 }
    ~

  node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6:3
    6   nuxtIcon: {
        ~~~~~~~~
    'nuxtIcon' is declared here.


Found 2 errors in 2 files.

Errors  Files
     1  node_modules/nuxt-icon/dist/runtime/Icon.vue:10
     1  node_modules/nuxt-icon/dist/runtime/IconCSS.vue:5

Here is the diff that solved my problem:

diff --git a/node_modules/nuxt-icon/dist/runtime/Icon.vue b/node_modules/nuxt-icon/dist/runtime/Icon.vue
index 1546625..c170029 100644
--- a/node_modules/nuxt-icon/dist/runtime/Icon.vue
+++ b/node_modules/nuxt-icon/dist/runtime/Icon.vue
@@ -4,10 +4,11 @@ import type { IconifyIcon } from '@iconify/vue'
 import { Icon as Iconify } from '@iconify/vue/dist/offline'
 import { loadIcon, addAPIProvider } from '@iconify/vue'
 import { ref, computed, watch } from 'vue'
+// @ts-ignore
 import { useAppConfig, useNuxtApp, useState } from '#imports'
 
 const nuxtApp = useNuxtApp()
-const appConfig = useAppConfig() as {
+const appConfig = useAppConfig() as unknown as {
   nuxtIcon: {
     size?: string
     class?: string
diff --git a/node_modules/nuxt-icon/dist/runtime/IconCSS.vue b/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
index fcef2d3..aee8c81 100644
--- a/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
+++ b/node_modules/nuxt-icon/dist/runtime/IconCSS.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+// @ts-ignore
 import { useAppConfig } from '#imports'
 
-const appConfig = useAppConfig() as {
+const appConfig = useAppConfig() as unknown as {
   nuxtIcon: {
     size?: string
     class?: string

This issue body was partially generated by patch-package.

[atinux]

Could you provide a reproduction please?

[beunerd]

@atinux Can you tell me more about what you mean by "reproduction"? Are you wondering what my tsconfig.json looks like? Something else?

[atinux]

A Stackblitz showcasing the error, I don't have any error using the module

[atinux]

Could you try with 0.6.3?

[beunerd]

That worked, @atinux! Thanks.

[DarkLink13]

It doesnt work for me with option:

 typescript: {
    typeCheck: true 
}

in version 0.6.3

[genu]

I was able to solve this by adding this to app.config.ts

export default defineAppConfig({
  nuxtIcon: {},
})

[beunerd]

Ah, yes, that makes sense. Thanks, @genu.

[GerhardLuykenSendcloud]

Thank you for spending the time developing this awesome module. I really love the simplicity of it. I am facing the same issue as above though and neither of the solutions worked for me.

With "nuxt-icon": "0.6.5",

app.config.ts

export default defineAppConfig({
  nuxtIcon: {
    // Default size
    // size: '2em',
    aliases: {
      nuxt: 'NuxtIcon',
    },
  },
})

Error in the terminal

ℹ Initializing prerenderer                                                                                                                                                                                                       nitro 2:27:27 PM
node_modules/nuxt-icon/dist/runtime/Icon.vue:11:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.

 11 const appConfig = useAppConfig() as {
                      ~~~~~~~~~~~~~~~~~~~
 12   nuxtIcon: {
    ~~~~~~~~~~~~~
... 
 20   }
    ~~~
 21 }
    ~

  node_modules/nuxt-icon/dist/runtime/Icon.vue:12:3
    12   nuxtIcon: {
         ~~~~~~~~
    'nuxtIcon' is declared here.

node_modules/nuxt-icon/dist/runtime/IconCSS.vue:6:19 - error TS2352: Conversion of type 'AppConfig' to type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'nuxtIcon' is missing in type 'AppConfig' but required in type '{ nuxtIcon: { size?: string | undefined; class?: string | undefined; aliases?: Record<string, string> | undefined; iconifyApiOptions?: { url?: string | undefined; publicApiFallback?: boolean | undefined; } | undefined; }; }'.

  6 const appConfig = useAppConfig() as {
                      ~~~~~~~~~~~~~~~~~~~
  7   nuxtIcon: {
    ~~~~~~~~~~~~~
... 
 15   }
    ~~~
 16 }
    ~

  node_modules/nuxt-icon/dist/runtime/IconCSS.vue:7:3
    7   nuxtIcon: {
        ~~~~~~~~
    'nuxtIcon' is declared here.


Found 2 errors in 2 files.

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

[lovkyndig]

Hey, programmers!
I got the same ts-2352 error about AppConfigin Icon & IconCSS.

Reproduce the error

It's very easy to reproduce this error.
Just init a fresh nuxt-app and add @nuxt/ui to package.json and nuxt.config.
@nuxt/ui is using nuxt-icon.

Then run build, and you will see it with your own eyes:)

Easy to solve the issue

I can confirm that two of the solution above is solving this issue.

1. "convert the expression to 'unknown' first" - is working.
2. adding app.configwith nuxtIcon: {} - is working.

[GerhardLuykenSendcloud]

This is working for me again after removing some non-default settings.

I removed app.config (I only had the settings above in there) and I also removed the typescript key config from nuxt.config.ts

It's building and generating fine now ❤️

[genu]

Another note, I believe this may only happen if you have type checking on in nuxt.config.ts:

typescript: {
    typeCheck: true
},

[lovkyndig]

Oh, yes, maybe!
I'm certainly using vue-tsc and have set it to true.
Anyway, I had to make an app.config-file, to add other constants there, so I'm comfortable with also having nuxtIcon: {},