nuxt / nuxt/icon

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

Open
#289 6 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
1.2k
Forks
96
Avg merge
8h 12m
Merged PRs (30d)
2

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the icon.clientBundle configuration in the develop branch and inspect the generated Nuxt prerender runtime shown in the production stack trace. Reproduce with a production build and deployment, then compare it with local preview. Done means the configured icons are available from the client bundle without the JSON parse error, timeout warnings, or post-load fetches.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs, typescript
Domain
build-system, cloud, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.