Icons aren't loaded (@nuxt-ui) #259

gAlleb · 2024-09-26T05:50:01Z

Hi there and thanks so much for your work!

Recently I've upgraded nuxt 3.12.4 to nuxt 3.13.2, @nuxt/ui@2.18.4 to @nuxt/ui@2.18.6, @tailwindcss/forms@0.5.7, @tailwindcss/typography@0.5.14 to @tailwindcss/forms@0.5.9, @tailwindcss/typography@0.5.15. Here are some observations.

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

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

The above happens whether one upgrades  to `@nuxt/ui@2.18.6`,`@tailwindcss/forms@0.5.9, @tailwindcss/typography@0.5.15` within `nuxt 3.12.4`.

Or

One upgrades to `nuxt 3.13.2` and `@nuxt/ui@2.18.6`.

Or 

Sometimes when one simply upgrades to `nuxt 3.13.2`.

What fixes an issue:

Downgrading to nuxt 3.12.4 with @nuxt/ui@2.18.4 and @tailwindcss/forms@0.5.7 @tailwindcss/typography@0.5.14 fixes an issue.
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/ui@2.18.6 with @tailwindcss/forms@0.5.9, @tailwindcss/typography@0.5.15 together result in the issue without the above settings (with nuxt/ui@2.18.4 and @tailwindcss/forms@0.5.7, @tailwindcss/typography@0.5.14 everything works fine).

3.13.2 with nuxt/ui@2.18.6 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).

repo: https://github.com/gAlleb/nuxt-om
npm install.
Run npm run generate - all icons work fine.
Upgrade npm install @nuxt/ui@2.18.6 @tailwindcss/forms@0.5.9 @tailwindcss/typography@0.5.15.

or

Upgrade npx nuxi upgrade and npm install @nuxt/ui@2.18.6
Navigate to webpage (generated by npm run generate, incognito mode, no cache).
Icons won't load without clientBundle setting and adding local collections.

Thanks!

The text was updated successfully, but these errors were encountered:

ParsaJR · 2024-09-26T18:36:23Z

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 · 2024-10-02T16:09:30Z

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 · 2024-10-02T17:33:53Z

@tahirmahmudzade
Installing icon collections locally and adding:

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

may fix this.

arkhaiel · 2024-10-08T17:36:08Z

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 · 2024-10-12T15:12:37Z

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 · 2024-10-12T21:41:50Z

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 · 2024-10-12T21:43:13Z

@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 · 2024-10-13T19:38:03Z

cc: @benjamincanac @antfu

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

gt-anthony · 2024-10-28T17:06:25Z

Just chiming in that my team is continuing to have issues here, none of the "fixes" listed above work on our end (hosting on Netlify).

Half of our icons don't load on new builds or when the url hasn't been viewed in a while. Then, after a refresh they usually show up. It also seems to happen to the same set of our icons every time — some use the dynamic prop, others don't, both instances have issues where the icon won't load at first.

We've tried downgrading packages, and applying the config updates listed here, but unfortunately nothing fixes it for us. We use Nuxt Icon as part of using Nuxt UI Pro.

Does anyone have a different solution/workaround here? We're holding off on a public reveal of our project until this is resolved, and I'd prefer to use Nuxt Icon if possible...

arkhaiel · 2024-10-28T17:15:56Z

Adding some data
The issue still happens on a fresh Nuxt UI alpha install, and on the ui3 website as well.

JhumanJ · 2024-11-04T14:20:32Z

Same issue for us but only locally

Edit: adding clientBundle config doens't help

antfu · 2024-11-06T05:53:39Z

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

I am not able to reproduce on this repo with the latest @nuxt/ui and @nuxt/icon

Can anyone help to send a minimal reproduction? Thanks!

lovatom · 2024-11-06T11:30:29Z

Same issue on my project in prod. Icons are loading properly in local but once in prod, the icon are showing up on 50% of the time, unless user force reload the page. Already downloaded the icons to my project and added "@nuxt/icon" to my config

antfu · 2024-11-10T11:11:57Z

After a deep digging, I found out this was because, in certain mono repo setups, there will be two versions of @iconify/vue that get bundled to the client side, causing the client bundle not to register to the correct instance. v1.7.2 should fix that by including a dedupe config by default - let me know if it helps!

gAlleb · 2024-11-10T11:46:21Z

Thanks @antfu. It seems to work! I've removed clientBundle with icon collections, installed 1.7.2 alongside nuxt/ui - icons are loaded. First it gave me timeout warnings, but after removing node_modules and reinstalling - no warnings, icons are loaded. Thanks!

  "devDependencies": {
    "@nuxt/content": "^2.13.4",
    "@nuxt/icon": "^1.7.2",
    "@nuxt/image": "^1.7.0",
    "@nuxt/ui": "^2.19.1",
    "@nuxtjs/i18n": "^9.0.0",
    "@pinia/nuxt": "^0.7.0",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "@tailwindcss/forms": "^0.5.9",
    "@tailwindcss/typography": "^0.5.15",
    "@types/node": "^22.9.0",
    "nuxt": "^3.14.159",
   ...

dany68 · 2024-11-11T10:51:55Z

Hi,

Thanks @antfu for your work. It seems the error still persist. I deleted the node_modules, updated all the dependencies (nuxt, icon...) to the latests, and also tried the clientBundle options described above.

For some reasons sometimes the icons don't appear (very randomly) on production server. Locally with npm run dev there is no problem. I use the svg mode.

CodyBontecou · 2024-11-11T15:51:49Z

Unfortunately, I am seeing the same thing as @dany68. This is using v1.7.2.

JhumanJ · 2024-11-13T09:31:06Z

Same 😔

onurusluca · 2024-11-13T10:19:04Z

Having the same problem too. But randomly, sometimes. Of course mostly after new deployment and on initial load.

hoachnt · 2024-11-14T04:29:38Z

Having the same problem too. But randomly, sometimes. Of course mostly after new deployment and on initial load.

Yeah, I still don't understand when the icons are rendering and when they aren't

antfu · 2024-11-14T04:31:38Z

If anyone still encounter this, I'd be appreciated if you can create a new issue with a minimal reproduction so I can have a deeper look. Thanks!

hoachnt · 2024-11-14T05:12:46Z

If anyone still encounter this, I'd be appreciated if you can create a new issue with a minimal reproduction so I can have a deeper look. Thanks!

Oh yeah, it works now after updating the dependency

dany68 · 2024-11-14T14:17:07Z

I deleted .output, .nuxt, node_modules and re run install with everything up to date. It seems to work now.
Thanks

arkhaiel mentioned this issue Oct 9, 2024

Broken build - "stdin" is not exported by unenv #269

Closed

danielroe mentioned this issue Oct 14, 2024

Icons not rendering on production build when mounting nuxt/nuxt#29387

Closed

antfu self-assigned this Nov 5, 2024

antfu closed this as completed Nov 10, 2024

JhumanJ mentioned this issue Nov 14, 2024

[DEPLOYMENT] Icons using by OpnForm is missing. JhumanJ/OpnForm#605

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Icons aren't loaded (@nuxt-ui) #259

Icons aren't loaded (@nuxt-ui) #259

gAlleb commented Sep 26, 2024 •

edited

Loading

ParsaJR commented Sep 26, 2024 •

edited

Loading

tahirmahmudzade commented Oct 2, 2024

gAlleb commented Oct 2, 2024

arkhaiel commented Oct 8, 2024 •

edited

Loading

davidekingsss commented Oct 12, 2024

aligzl commented Oct 12, 2024

tahirmahmudzade commented Oct 12, 2024

danielroe commented Oct 13, 2024

gt-anthony commented Oct 28, 2024

arkhaiel commented Oct 28, 2024

JhumanJ commented Nov 4, 2024 •

edited

Loading

antfu commented Nov 6, 2024 •

edited

Loading

lovatom commented Nov 6, 2024

antfu commented Nov 10, 2024

gAlleb commented Nov 10, 2024

dany68 commented Nov 11, 2024 •

edited

Loading

CodyBontecou commented Nov 11, 2024

JhumanJ commented Nov 13, 2024

onurusluca commented Nov 13, 2024

hoachnt commented Nov 14, 2024

antfu commented Nov 14, 2024

hoachnt commented Nov 14, 2024

dany68 commented Nov 14, 2024 •

edited

Loading

Icons aren't loaded (@nuxt-ui) #259

Icons aren't loaded (@nuxt-ui) #259

Comments

gAlleb commented Sep 26, 2024 • edited Loading

ParsaJR commented Sep 26, 2024 • edited Loading

tahirmahmudzade commented Oct 2, 2024

gAlleb commented Oct 2, 2024

arkhaiel commented Oct 8, 2024 • edited Loading

davidekingsss commented Oct 12, 2024

aligzl commented Oct 12, 2024

tahirmahmudzade commented Oct 12, 2024

danielroe commented Oct 13, 2024

gt-anthony commented Oct 28, 2024

arkhaiel commented Oct 28, 2024

JhumanJ commented Nov 4, 2024 • edited Loading

antfu commented Nov 6, 2024 • edited Loading

lovatom commented Nov 6, 2024

antfu commented Nov 10, 2024

gAlleb commented Nov 10, 2024

dany68 commented Nov 11, 2024 • edited Loading

CodyBontecou commented Nov 11, 2024

JhumanJ commented Nov 13, 2024

onurusluca commented Nov 13, 2024

hoachnt commented Nov 14, 2024

antfu commented Nov 14, 2024

hoachnt commented Nov 14, 2024

dany68 commented Nov 14, 2024 • edited Loading

gAlleb commented Sep 26, 2024 •

edited

Loading

ParsaJR commented Sep 26, 2024 •

edited

Loading

arkhaiel commented Oct 8, 2024 •

edited

Loading

JhumanJ commented Nov 4, 2024 •

edited

Loading

antfu commented Nov 6, 2024 •

edited

Loading

dany68 commented Nov 11, 2024 •

edited

Loading

dany68 commented Nov 14, 2024 •

edited

Loading