fix: sanitise ssrRefs

should solve warning: Cannot stringify POJOs with symbolic keys

src/ssr-ref.ts

@@ -16,7 +16,8 @@ export function setSSRContext(ssrContext: any) {
 const isProxyable = (val: unknown): val is Record<string, unknown> =>
   val && typeof val === 'object'
 
-const sanitise = (val: unknown) => val
+const sanitise = (val: unknown) =>
+  (val && JSON.parse(JSON.stringify(val))) || val
 
 /**
  * `ssrRef` will automatically add ref values to `window.__NUXT__` on SSR if they have been changed from their initial value. It can be used outside of components, such as in shared utility functions, and it supports passing a factory function that will generate the initial value of the ref. **At the moment, an `ssrRef` is only suitable for one-offs, unless you provide your own unique key.**
@@ -60,8 +61,9 @@ export const ssrRef = <T>(value: T | (() => T), key?: string): Ref<T> => {
         return Reflect.get(target, prop)
       },
       set(obj, prop, val) {
+        const result = Reflect.set(obj, prop, val)
         data[key] = sanitise(_ref.value)
-        return Reflect.set(obj, prop, val)
+        return result
       },
     })
 

test/fixture/nuxt.config.js

@@ -1,6 +1,8 @@
 // eslint-disable-next-line
 const { resolve } = require('path')
 
+const routes = ['/context/a']
+
 module.exports = {
   rootDir: resolve(__dirname, '../..'),
   buildDir: resolve(__dirname, '.nuxt'),
@@ -16,9 +18,7 @@ module.exports = {
     ? {
         generate: {
           dir: 'dist/fixture',
-          routes: [
-            '/context/a'
-          ]
+          routes
         },
         router: {
           base: '/fixture/',
@@ -27,7 +27,11 @@ module.exports = {
           publicPath: 'fixture',
         },
       }
-    : {}),
+    : {
+      generate: {
+        routes,
+      }
+    }),
   buildModules: [
     process.env.NODE_ENV === 'test'
       ? require('../..').default

test/fixture/pages/ssr-ref.vue

@@ -44,10 +44,10 @@ export function fetcher(result, time = 100) {
 
 export default defineComponent({
   setup() {
-    const refValue = ssrRef('') // changed => in __NUXT__
-    const prefetchValue = ssrRef('') // changed => in __NUXT__
-    const funcValue = ssrRef(() => 'runs SSR or client-side') // function => in __NUXT__
-    const noChange = ssrRef('initValue') // no Change => not in __NUXT__
+    const refValue = ssrRef('')
+    const prefetchValue = ssrRef('')
+    const funcValue = ssrRef(() => 'runs SSR or client-side')
+    const noChange = ssrRef('initValue')
 
     const shallow = shallowSsrRef({ v: { deep: 'init' } })
     if (process.server) shallow.value = { v: { deep: 'server' } }
@@ -67,11 +67,6 @@ export default defineComponent({
       fetcher(process.server ? 'server' : 'client', 500)
     )
 
-    // Error handeling
-    // useAsync(() => {
-    //   throw '42'
-    // })
-
     return {
       computedVal,
       funcValue,