[nuxt] Cannot load payload /_payload.json
I just created a brand new Nuxt project using
npx nuxi@latest init. I set up routing by adding <NuxtPage /> to app.vue and creating pages/index.vue. Then I made a static export using npm run generate and finally I serve it using npx serve .output/public.
I am getting the following error in my browser's console:
Why is Nuxt is trying to load a non-existent JSON file? Did I find a bug already? π¬10 Replies
Works fine using Nuxt 3.6.1. Possibly related to this: https://github.com/nuxt/nuxt/pull/21860
GitHub
fix(nuxt): ensure static presets equivalent to
nuxi generate by d...π Linked issue
resolves #21254
β Type of change
π Documentation (updates to the documentation or readme)
π Bug fix (a non-breaking change that fixes an issue)
π Enhancement (improving an existi...
@danielroe ^ I am going to bed now so hopefully you don't mind me just tagging you instead of replying to the PR or making an issue π
I was about to open an issue but someone else already did: https://github.com/nuxt/nuxt/issues/22068
GitHub
[nuxt] Cannot load payload /_payload.json Β· Issue #22068 Β· nuxt/nu...
Environment Operating System: Windows_NT Node Version: v18.16.0 Nuxt Version: 3.6.2 Nitro Version: 2.5.2 Package Manager: npm@9.8.0 Builder: vite User Config: pages, debug, dev, modules, pwa, app, ...
@danielroe where does the payload come from if I set
payloadExtraction to false? I noticed that no request is being made now if I browse to another page
I am not using useFetch or anything like that so I suppose there shouldn't be a payload anyway but with payloadExtraction set to true it does generate one for every page
I am not too familiar with Nuxt so if this makes no sense please let me know π
Nuxt saves the content of every useasyncdata/usefetch call in a payload when doing this, so they won't be refetched when client-side navigation. otherwise they will be refetched on client side navigation even though they won't on hard reloads
I think I get it now. If
payloadExtraction is set to false, the payload is only stored in the static HTML files (probably for hydrating?), and Nuxt just makes the API call when you navigate to another page. Did I get that right?
And is it really necessary to generate a payload for pages that do not use useFetch or related?
SvelteKit for example creates a __data.json (equivalent to Nuxt's _payload.json) only if you have a server-side load
I also noticed that Nuxt does not prefetch the payload (like when you hover over a link for example), this would be a nice feature too
SvelteKit has this: https://kit.svelte.dev/docs/link-options#data-sveltekit-preload-dataExactly
It should prefetch payloads on a generated site when they come into view
Ah yes it does, my bad
Unknown Userβ’15mo ago
Message Not Public
Sign In & Join Server To View
Not sure what you mean