fix(nuxt): handle serialising empty bigint (#21257)

Co-authored-by: lorado <eugen.sacharow@gmx.de>

packages/nuxt/src/app/plugins/revive-payload.client.ts

@@ -5,8 +5,8 @@ import { defineNuxtPlugin } from '#app/nuxt'
 
 const revivers = {
   NuxtError: (data: any) => createError(data),
-  EmptyShallowRef: (data: any) => shallowRef(data === '_' ? undefined : JSON.parse(data)),
+  EmptyShallowRef: (data: any) => shallowRef(data === '_' ? undefined : data === '0n' ? 0n : JSON.parse(data)),
-  EmptyRef: (data: any) => ref(data === '_' ? undefined : JSON.parse(data)),
+  EmptyRef: (data: any) => ref(data === '_' ? undefined : data === '0n' ? 0n : JSON.parse(data)),
   ShallowRef: (data: any) => shallowRef(data),
   ShallowReactive: (data: any) => shallowReactive(data),
   Ref: (data: any) => ref(data),

packages/nuxt/src/app/plugins/revive-payload.server.ts

@@ -6,8 +6,8 @@ import { defineNuxtPlugin } from '#app/nuxt'
 
 const reducers = {
   NuxtError: (data: any) => isNuxtError(data) && data.toJSON(),
-  EmptyShallowRef: (data: any) => isRef(data) && isShallow(data) && !data.value && (JSON.stringify(data.value) || '_'),
+  EmptyShallowRef: (data: any) => isRef(data) && isShallow(data) && !data.value && (typeof data.value === 'bigint' ? '0n' : (JSON.stringify(data.value) || '_')),
-  EmptyRef: (data: any) => isRef(data) && !data.value && (JSON.stringify(data.value) || '_'),
+  EmptyRef: (data: any) => isRef(data) && !data.value && (typeof data.value === 'bigint' ? '0n' : (JSON.stringify(data.value) || '_')),
   ShallowRef: (data: any) => isRef(data) && isShallow(data) && data.value,
   ShallowReactive: (data: any) => isReactive(data) && isShallow(data) && toRaw(data),
   Ref: (data: any) => isRef(data) && data.value,

test/fixtures/basic/nuxt.config.ts

@@ -40,6 +40,12 @@ export default defineNuxtConfig({
     './extends/node_modules/foo'
   ],
   nitro: {
+    esbuild: {
+      options: {
+        // in order to test bigint serialisation
+        target: 'es2022'
+      }
+    },
     routeRules: {
       '/route-rules/spa': { ssr: false },
       '/no-scripts': { experimentalNoScripts: true }
@@ -122,6 +128,19 @@ export default defineNuxtConfig({
   },
   telemetry: false, // for testing telemetry types - it is auto-disabled in tests
   hooks: {
+    'webpack:config' (configs) {
+      // in order to test bigint serialisation we need to set target to a more modern one
+      for (const config of configs) {
+        const esbuildRules = config.module!.rules!.filter(
+          rule => typeof rule === 'object' && rule && 'loader' in rule && rule.loader === 'esbuild-loader'
+        )
+        for (const rule of esbuildRules) {
+          if (typeof rule === 'object' && typeof rule.options === 'object') {
+            rule.options.target = 'es2022'
+          }
+        }
+      }
+    },
     'modules:done' () {
       addComponent({
         name: 'CustomComponent',

test/fixtures/basic/pages/json-payload.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const state = useState(() => shallowRef({} as Record<string, any>))
+const nonDisplayedState = useState(() => shallowRef({} as Record<string, any>))
 
 if (process.server) {
   const r = ref('')
@@ -10,6 +11,8 @@ if (process.server) {
   state.value.reactive = reactive({ ref: r })
   state.value.error = createError({ message: 'error' })
   state.value.date = new Date()
+  nonDisplayedState.value.bigint = 0n
+  nonDisplayedState.value.bigintRef = ref(0n)
 }
 </script>
 
@@ -17,10 +20,12 @@ if (process.server) {
   <div>
     <pre>{{ state }}</pre>
     Date: {{ state.date instanceof Date }} <br>
+    BigInt: {{ nonDisplayedState.bigint === 0n }} <br>
     Error: {{ isNuxtError(state.error) }} <hr>
     Shallow reactive: {{ isReactive(state.shallowReactive) && isShallow(state.shallowReactive) }} <br>
     Shallow ref: {{ isShallow(state.shallowRef) }} <br>
     Undefined ref: {{ isRef(state.undefined) }} <br>
+    BigInt ref: {{ isRef(nonDisplayedState.bigintRef) && typeof nonDisplayedState.bigintRef.value === 'bigint' }} <br>
     Reactive: {{ isReactive(state.reactive) }} <br>
     Ref: {{ isRef(state.ref) }} <hr>
     Recursive objects: {{ state.ref === state.shallowReactive.nested.ref }} <br>