nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
961 stars 59 forks source link

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

Open mathix420 opened 1 month ago

mathix420 commented 1 month ago

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. Image

Icons missing: Image

Expected behavior (like local preview): Image

kbforr commented 4 weeks ago

had the same issue.

timotheeduran commented 2 weeks ago

Same issue, any updates?

zxdream64230 commented 20 hours ago

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