Creating app.config.ts forces to define nuxtIcon

[tcimawap]

Environment

• Operating System: Darwin
• Node Version: v18.15.0
• Nuxt Version: 3.8.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.0
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, typescript, modules
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Version

v2.11.0

Reproduction

Create an app.config.ts without nuxtIcon and run build task
export default defineAppConfig({ ui: { primary: 'teal', gray: 'neutral' } })

Description

We should be able to create app.config.ts without nuxtIcon (following is ok)
export default defineAppConfig({ nuxtIcon: {}, ui: { primary: 'teal', gray: 'neutral' } })

Additional context

v2.11.0 brings following dependency
"nuxt-icon": "^0.6.6",

Logs

No response

[benjamincanac]

This is weird I haven't encountered this myself, also it should have been fixed already in nuxt/icon#113.

[tcimawap]

I tried to reproduce with a new project and indeed to have the issue, you also need to run pnpm i -D typescript vue-tsc and in nuxt.config.ts add

typescript: {
    typeCheck: true
  }

Shouldn't we have nuxtIcon?: {...} instead in following in Icon.vue ?

const appConfig = useAppConfig() as {
  nuxtIcon: {
    size?: string
    class?: string
    aliases?: Record<string, string>
    iconifyApiOptions?: {
      url?: string
      publicApiFallback?: boolean
    }
  }
}

[mcfarljw]

I'm running into this issue as well with typeCheck: true using the latest 0.6.1 release. The only want to fix it is defined nuxtIcon in the app config otherwise builds fail. Here is my config and the full error message:

export default defineAppConfig({
  /**
   * Nuxt UI
   * https://ui.nuxt.com/getting-started/theming
   */
  ui: {
    primary: 'yellow',
    gray: 'stone',
  },
  /**
   * TODO: Remove this when the issue listed below is fixed.
   * https://github.com/nuxt/ui/issues/1043
   */
  nuxtIcon: {},
})

ℹ Initializing prerenderer                                                                                  nitro 10:55:34 AM
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

For good measure I did a fresh install of node_modules but the issue is still occurring.

[benjamincanac]

Related to nuxt/icon#117