client bundle not working as intended in cloudflare (only in production)

[mathix420]

Reproduction: fork this in develop branch https://github.com/mathix420/mathix.dev/tree/develop

Config:

export default defineNuxtConfig({
  future: { compatibilityVersion: 4 },
  compatibilityDate: "2024-04-03",

  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ["/", "/blog"],
    },
  },

  icon: {
    mode: "svg",
    clientBundle: {
      // list of icons to include in the client bundle
      icons: [
        "simple-icons:github",
        "simple-icons:bento",
        "simple-icons:stackoverflow",
        "simple-icons:matrix",
        "simple-icons:linkedin",
        "ic:round-email",
      ],
    },
  },
});

Production logs:

16:25:44.157 [error] [nuxt] [request error] [unhandled] [500] Unexpected token 'F', "File size "... is not valid JSON
16:25:44.157   at JSON.parse (<anonymous>)  
16:25:44.158   at parseJSONFromBytes (node:internal/deps/undici/undici:5472:19)  
16:25:44.158   at successSteps (node:internal/deps/undici/undici:5454:27)  
16:25:44.158   at fullyReadBody (node:internal/deps/undici/undici:4381:9)  
16:25:44.158   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
16:25:44.158   at async consumeBody (node:internal/deps/undici/undici:5463:7)  
16:25:44.159   at async Object.fluent-emoji (./node_modules/.cache/nuxt/.nuxt/prerender/chunks/runtime.mjs:6006:17)  
16:25:44.159   at async defineCachedEventHandler.group (./node_modules/.cache/nuxt/.nuxt/prerender/chunks/runtime.mjs:6199:39)  
16:25:44.159   at async ./node_modules/.cache/nuxt/.nuxt/prerender/chunks/runtime.mjs:1075:20  
16:25:44.159   at async _resolve (./node_modules/.cache/nuxt/.nuxt/prerender/chunks/runtime.mjs:897:23)
16:25:44.466 [warn] [Icon] loading icon `simple-icons:github` timed out after 500ms
16:25:44.468 [warn] [Icon] loading icon `simple-icons:bento` timed out after 500ms
16:25:44.468 [warn] [Icon] loading icon `simple-icons:stackoverflow` timed out after 500ms
16:25:44.469 [warn] [Icon] loading icon `simple-icons:matrix` timed out after 500ms
16:25:44.469 [warn] [Icon] loading icon `simple-icons:linkedin` timed out after 500ms
16:25:44.470 [warn] [Icon] loading icon `ic:round-email` timed out after 500ms

After production deployment, we can see that icons are still fetched after initial load.

Icons missing:

Expected behavior (like local preview):

[kbforr]

had the same issue.

[timotheeduran]

Same issue, any updates?

[zxdream64230]

Same issue on Netlify. Only with some icons in a modal.

[vptill]

Same issue, icons only load if they are in clientBundle, both on netlify and cloudflare pages.

edit: on netlify, in my case it was actually a caching issue with a wildcard routeRule '/**': { isr: 60 * 5 }

[MickL]

Is this still an issue? I am deploying to Cloudflare since 1 year, always used nuxt/icon and never had any issue

[Crease29]

Same issue for me on Cloudflare Pages. A reload usually fixes the issue.