Creating app.config.ts forces to define nuxtIcon

tcimawap commented 10 months ago

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: pnpm@8.11.0
Builder: -
User Config: devtools, typescript, modules
Runtime Modules: @nuxt/ui@2.11.0
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 commented 10 months ago

This is weird I haven't encountered this myself, also it should have been fixed already in https://github.com/nuxt-modules/icon/pull/113.

tcimawap commented 10 months ago

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 commented 10 months ago

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 nodemodules but the issue is still occurring.

benjamincanac commented 9 months ago

nuxt / ui