Icons only working partially in production

oripka commented 3 days ago

Environment

Operating System: Darwin
Node Version: v21.7.3
Nuxt Version: 3.12.3
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: pnpm@9.0.6
Builder: -
User Config: image, site, nitro, extends, devtools, telemetry, supabase, app, content, routeRules, aos, gtag, modules, sitemap, colorMode, ui, fontMetrics, googleFonts, i18n, runtimeConfig, hooks, compatibilityDate
Runtime Modules: nuxt-og-image@3.0.0-rc.50, nuxt-time@0.1.3, nuxt-gtag@2.0.6, nuxt-aos@1.2.4, @nuxtjs/supabase@1.2.2, @nuxt/content@2.13.0, @nuxt/ui@2.17.0, @nuxthq/studio@1.1.2, @vueuse/nuxt@10.11.0, @nuxtjs/fontaine@0.4.3, @nuxtjs/sitemap@5.3.2, nuxt-schema-org@3.3.8, @nuxtjs/i18n@8.3.1, @nuxtjs/google-fonts@3.2.0, nuxt-icon@0.6.10, @nuxt/image@1.7.0
Build Modules: -

Version

v2.17.0

Reproduction

In production

In dev

Description

Icons are not displayed in the production build. I am using Nuxt UI Pro with the stock components. This his happening after updating all my packages (I did not update them for a couple of weeks)

content.yml

  items:
    - title: Easy to use
      description: Online tools and materials
      icon: i-heroicons-cog
    - title: Reliable
      description: Excellent courses with hands-on labs
      icon: i-heroicons-check
    - title: Interactive
      description: Quizzes and assessments
      icon: i-heroicons-lock-closed
    - title: Flexible
      description: Customize your learning exprience with flexible content formats
      icon: i-heroicons-rocket-launch
    - title: Affordable
      description: Early-bird discount.
      icon: i-heroicons-currency-dollar
    - title: High-quality material
      description: High-quality lab guide and student guides.
      icon: i-heroicons-chart-bar

index.vue

        <ULandingSection :title="page.features.title" :description="page.features.description">
            <UPageGrid>
                <ULandingCard v-for="(item, index) in page.features.items" :key="index" v-bind="item" />
            </UPageGrid>
        </ULandingSection>

I tried setting this in nuxt.config.ts

  ui: {
    icons: 'all'
  },

with this packages.json

    "@heroicons/vue": "^2.1.4",
    "@iconify/json": "^2.2.225",

Before I had

  ui: {
    icons: ['flag', 'heroicons', 'simple-icons', 'ph']
  },

with this packages.json

    "@heroicons/vue": "^2.1.4",
    "@iconify-json/flag": "^1.1.53",
    "@iconify-json/game-icons": "^1.1.9",
    "@iconify-json/ph": "^1.1.13",
    "@iconify-json/simple-icons": "^1.1.108",

Both configs do not work. All icons are affected, above I only use heroicons but also ph is affected.

Additional context

No response

Logs

No response

benjamincanac commented 3 days ago

Did it work before by specifying the icons as ['flag', 'heroicons', 'simple-icons', 'ph'] instead of all? 🤔

oripka commented 3 days ago

After updating the packages it did not work neither with ['flag', 'heroicons', 'simple-icons', 'ph'] nor with all. This happens on Vercel deployments

benjamincanac commented 3 days ago

Sorry but I can't help you debug an upgrade that big, could you please provide a minimal reproduction?

oripka commented 3 days ago

It seems that this is only happening if the icon is only defined in the content folder in a yml file. If the same icon is also used in a vue file than the icon is included in the production build

benjamincanac commented 3 days ago

Are you deploying on CloudFlare? 🤔

oripka commented 3 days ago

No, Vercel

benjamincanac commented 3 days ago

Have you enabled the future.compatibilityVersion to 4? A reproduction would be way easier..

oripka commented 3 days ago

Ok, I am working on a reproduction. I haven't set the future.compatibilityVersion but setting

    icons: {
      dynamic: true
    },

makes it work

benjamincanac commented 3 days ago

If you're missing the heroicons icons, why don't you have the @iconify-json/heroicons dependency installed?

oripka commented 3 days ago

Yeah, I noticed that too, but I don't think that is the problem as ph icons are missing too and were installed, and the issues persists after installing @iconify/json.

I create a repo here is the site: https://nuxt-ui-icon-issue-2uqpejate-oripkas-projects.vercel.app/ (if it does not work, try this one: https://nuxt-ui-icon-issue.vercel.app/) here is the repository: https://github.com/oripka/nuxt-ui-icon-issue

i-heroicons-rocket-launch is in the index.vue and the mycontent.yml and works. i-ph-terminal-window is also displayed (it is referenced in the app.config.ts. The other icons are not displayed. I

    "@iconify-json/heroicons": "^1.1.21",
    "@iconify-json/ph": "^1.1.13",
    "@iconify/json": "^2.2.225",

oripka commented 3 days ago

The URL above might be protected, this should work: https://nuxt-ui-icon-issue.vercel.app/

nuxt / ui