Cannot stringify POJOs with symbolic keys

When using Pinia from a fetch function in page with Nuxt, we get the following error for each Pinia store initiated.

WARN: Cannot stringify POJOs with symbolic keys Symbol(vfa.key.reactiveIdentifier)

It doesn’t seem to affect the functionality, but this seems to be something that shouldn’t happen…

Bug can be reproduced with a clean Nuxt installation:

npx create-nuxt-app piniabug
cd piniabug
yarn add pinia @vue/composition-api
# create a store according to example in Pinia README to stores/main.js
# setup the Nuxt plugin according to Pinia README
# setup composition-api as Nuxt plugin (see below)
# create a fetch function in the pages/index.vue file (see below)

plugins/composition-api.js

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';

Vue.use(VueCompositionApi);

export * from '@vue/composition-api';

pages/index.vue (relevant parts)

import { useMainStore } from '@/stores/main'
...
 fetch({ req }) {
    const main = useMainStore(req);
    console.log(main.state);
  },
...

The error goes away if I use for example lodash cloneDeep on the req before passing it in to useMainStore, but that seems to break Pinia somehow, so that store modifications done during the fetch method are not available in the client-side.

[MartinMalinda]

@posva thanks for this example. I figured out I got this error from somewhere else, perhaps by doing console.error on the server which caused nuxt-sentry trying to pass the error to the client and the error failed to serialize.

I’m still getting the cannot stringify pojos with symobolic keys warning but it’s not breaking for me anymore. I might be passing something wrong to pinia state. I’ll create a new issue once I identify what state specifically causes it.

[posva]

This seems fixed: https://github.com/posva/pinia-example-nuxt. If you can reproduce in a boiled down reproduction with updated deps, open a new issue

Would JSON.stringify really be a performance hit compared to what Nuxt is doing right now? But it makes sense if this needs to be fixed on Nuxt side primarily.

It depends. If your state is serializable, you could also convert it to json instead. Take a look at the nuxt folder, it’s very easy to create a custom build module