Icons aren't loaded (@nuxt-ui)

[gAlleb]

Hi there and thanks so much for your work!

Recently I've upgraded nuxt 3.12.4 to nuxt 3.13.2, @nuxt/[email protected] to @nuxt/[email protected], @tailwindcss/[email protected], @tailwindcss/[email protected] to @tailwindcss/[email protected], @tailwindcss/[email protected]. Here are some observations.

Icons stop working on initial site loading (and 50/50% on next loads):

1. Navigate to webpage (generated by npm run generate, incognito mode, no cache): no icons.
2. Refresh page: sometimes there are icons, sometimes not, sometimes only half of them.

The above happens whether one upgrades  to `@nuxt/[email protected]`,`@tailwindcss/[email protected], @tailwindcss/[email protected]` within `nuxt 3.12.4`.

Or

One upgrades to `nuxt 3.13.2` and `@nuxt/[email protected]`.

Or 

Sometimes when one simply upgrades to `nuxt 3.13.2`.

What fixes an issue:

1. Downgrading to nuxt 3.12.4 with @nuxt/[email protected] and @tailwindcss/[email protected] @tailwindcss/[email protected] fixes an issue.
2. Installiing collections locally (in my case @iconify-json/bxl, @iconify-json/heroicons, @iconify-json/heroicons-solid) and adding:

icon: {
clientBundle: {
      scan: true,
      sizeLimitKb: 256, }, },

Howewer one question still bothers me. Same nuxt/ui. 3.12.4 without the above settings works like a charm, but when updating the above deps barely loads icons. Just changing deps and the necessity of the the above arises. But why?

3.12.4 and nuxt/[email protected] with @tailwindcss/[email protected], @tailwindcss/[email protected] together result in the issue without the above settings (with nuxt/[email protected] and @tailwindcss/[email protected], @tailwindcss/[email protected] everything works fine).

3.13.2 with nuxt/[email protected] result in the issue as well (keeping tailwind deps old). And sometimes just upgrading to 3.13.2 results in the issue.

With the minimal amount of site payload (one page - 2-3 icons) - 3.13.2 works fine without the above changes. When full project is in place - icons without the above changes stop working. I'm talking about npm run generate with ssr:true. npm run build works in every case.

Can someone elaborate?

Also you can easily reproduce this behavior (node v20.17.0).

1. repo: https://github.com/gAlleb/nuxt-om

2. npm install.

3. Run npm run generate - all icons work fine.

4. Upgrade npm install @nuxt/[email protected] @tailwindcss/[email protected] @tailwindcss/[email protected].

or

5. Upgrade npx nuxi upgrade and npm install @nuxt/[email protected]

6. Navigate to webpage (generated by npm run generate, incognito mode, no cache).

7. Icons won't load without clientBundle setting and adding local collections.

Thanks!

[ParsaJR]

I have exactly the same problem. And looks like this problem also exist even on the Nuxt.com , unjs docs and... (The problem is not only in Firefox. It is also in Chrome)

[tahirmahmudzade]

I'm also having same problem in my production. I'm using Nuxthub / Cloudflare, the same problem happens the first time i open up my production site any solution on this yet ?

I have exactly the same problem. And looks like this problem also exist even on the Nuxt.com , unjs docs and... (The problem is not only in Firefox. It is also in Chrome)

[gAlleb]

@tahirmahmudzade
Installing icon collections locally and adding:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui'
  ],
  icon: {
clientBundle: {
 
      scan: true,
 
      sizeLimitKb: 256,
    },
  },
})

may fix this.

[mathieunicolas]

I have the same problem, and I don't like it because I don't know where to start to fix it.
I can't even reproduce the bug, it looks like it's random even when the cache is emptied. I tried few tweaks but I feel a little bit lost in the documentation.

Does someone know why it's happening ? I see no error or problem in the firefox dev tools so I feel like I can't do much.

[davidekingsss]

similar problem here, I turned down ssr and render with vite-pwa. when I open my home page directly icons doesn't load if there is not any trigger, and the icon loading warning in console won't show up everytime. but when I relogin my supabase user my icons render perfectly except the header breadcrumb not rendered at that time point.

[aligzl]

same problem, even in the nuxt-ui website or offical nuxt website or any nuxt websites. Seems like general issue. I hope will be fixed soon.

[tahirmahmudzade]

@tahirmahmudzade
Installing icon collections locally and adding:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui'
  ],
  icon: {
clientBundle: {
 
      scan: true,
 
      sizeLimitKb: 256,
    },
  },
})

may fix this.

This worked well, thanks a lot!

[danielroe]

cc: @benjamincanac @antfu

got a few reports on twitter: https://twitter.com/kregenrek/status/1845546610731745296