renderJsonPayloads causes Cannot stringify arbitrary non-POJOs error

[mwohlan]

Environment

• Operating System: Linux
• Node Version: v18.15.0
• Nuxt Version: 3.5.0-28063431.93ba5e7c
• Nitro Version: 2.5.0-28062045.977f1d0
• Package Manager: pnpm@7.17.0
• Builder: vite
• User Config: modules, imports, build, fontMetrics, ssr, experimental, nitro, routeRules, unocss, typescript, headlessui, css, runtimeConfig, supabase, app
• Runtime Modules: @vueuse/nuxt@10.1.2, @unocss/nuxt@0.51.5, @pinia/nuxt@0.4.10, @nuxtjs/supabase@0.3.5, nuxt-headlessui@1.1.4, @nuxtjs/fontaine@0.2.5, @nuxt/devtools@0.4.6-28063403.0caa4de
• Build Modules: -

Reproduction

Will try later if needed

Describe the bug

After updating my nuxt project I experienced the following error message on ssr ( hitting the same routes on client side navigation is fine):

Its working fine again when disabling renderJsonPayloads

Additional context

Seems to be related to #20770 and #19205

Logs

No response

[danielroe]

Thank you so much for the update! I would be very interested to know what's in your payload... any chance of getting a reproduction or access to your repo?

[mwohlan]

Thanks for the quick reply @danielroe . Okay I think i found the issue:

In my project I am using this pinia store

import { acceptHMRUpdate, defineStore } from 'pinia'

export const useActiveDocumentStore = defineStore('activeDocument', () => {
  /**
   * Current named of the user.
   */
  const activeDocument = ref<Pdf>()

  const setBerechtigung = (berechtigung: Berechtigung) => {
    activeDocument.value!.berechtigung_id = berechtigung.id
    activeDocument.value!.berechtigung = berechtigung
  }
  return {
    activeDocument,
    setBerechtigung,
  }
})

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(useActiveDocumentStore, import.meta.hot))

With renderJSONPayloads disabled this leads to the following part within the payload:

 pinia: { activeDocument: { activeDocument: void 0 }, menu: { sideBarOpen: c } },

This seems to cause the error when renderJSONPayloads is enabled. Because when I am initializing the ref with null instead of implicit undefined:

  const activeDocument = ref<Pdf |null>(null)

The error is gone with renderJSONPayloads enabled.

Hopefully this helps

[kstraszewski]

@danielroe I have here similiar error:
https://stackblitz.com/edit/nuxt-3-h3gq8x?file=composables%2FuseFooStore.ts

When you declare something like this

import { defineStore } from 'pinia';

class Foo {
  foo: string = 'foo';
}
export const useFooStore = defineStore('FOO_STORE', () => {
  const foo = ref<Foo>(new Foo());
  return {
    foo,
  };
});

I'm getting the same error Cannot stringify arbitrary non-POJOs. When i set renderJsonPayloads to false everything works fine.

[oscarhandsome]

Thanks @kstraszewski for your answer, its helped