client bundle not working as intended in cloudflare (only in production)
Nobody has claimed this yet.
- 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.
Icons missing:
Expected behavior (like local preview):
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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