renderJsonPayloads causes Cannot stringify arbitrary non-POJOs error

[kstraszewski]

Environment

---

• Operating System: Darwin
• Node Version: v16.14.0
• Nuxt Version: 3.5.0
• Nitro Version: 2.4.0
• Package Manager: npm@8.19.0
• Builder: vite
• User Config: typescript, app, ssr, experimental, routeRules, postcss, css, modules, sitemap, image, unocss, runtimeConfig, vite, build
• Runtime Modules: nuxt-typed-router@3.2.2, @unocss/nuxt@0.51.13, @nuxt/image-edge@1.0.0-28059208.2abef1b, nuxt-jsonld@2.0.8, @funken-studio/sitemap-nuxt-3@4.0.4, @pinia/nuxt@0.4.11, @nuxt/devtools@0.4.6, @vueuse/nuxt@10.1.2, ()
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/nuxt-3-h3gq8x?file=composables%2FuseFooStore.ts

Describe the bug

Same as #20787. When renderJsonPayloads is set to true, this error occures:
renderJsonPayloads causes Cannot stringify arbitrary non-POJOs

Additional context

No response

Logs

No response

[nicolaspayot]

If I can add a detail: it's happening when trying to set a class instance as a ref / reactive object.

In the provided starter:

const foo = ref<Foo>(new Foo());

triggers the error while:

const foo = ref<Foo>({foo: 'foo'});

is ok.

[danielroe]

Yes, that would be the case. You should define a custom payload reviver/reducer if you want to include a custom class in anything that is serialised (passed from server -> client), which would include store data.

See example here: https://nuxt.com/docs/api/composables/use-nuxt-app#payload.

[CernyMatej]

@danielroe sorry for the ping, but could you please consider expanding upon the documentation for the definePayloadPlugin? The current example, in my opinion, isn't very sufficient in explaining it.
I was able to get a class serialization working somehow - but have no idea how and I cannot reproduce it for a second one...

I have a ton of questions like:

• what is the name in definePayloadReducer and definePayloadReviver for? should it be the name of the class?
• will nuxt automatically determine which payload plugin to use?
• what is the '<blink>' string for in the example? what is the '_' for?

Let's say I have a method which returns an array of the constructor parameters. Would this be the correct way of registering the payload plugin?

export default definePayloadPlugin(() => {
    definePayloadReducer('ApiResponse', data => data instanceof ApiResponse && data.getReducedData())
    // @ts-ignore   (bcs data is typed as string for some reason)
    definePayloadReviver('ApiResponse', data => new ApiResponse(...data))
})

I know that you showed this in one of your twitch streams, but I wasn't able to find it.
Thank you!

[danielroe]

@CernyMatej Let's do that here: #21832

[JL-Code]

Yes, that would be the case. You should define a custom payload reviver/reducer if you want to include a custom class in anything that is serialised (passed from server -> client), which would include store data.

See example here: https://nuxt.com/docs/api/composables/use-nuxt-app#payload.

This document makes people dizzy, and I can't understand what I need to do to work properly.

[danielroe]

if you comment on the linked issue for adding better docs (#21832) with what you find confusing, specifically, and perhaps what you've tried and hasn't worked, we can make sure to address it when we write them.