From c9adf700a424e5af9e112ca0730db9add4ab61d2 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 30 May 2023 12:53:04 +0100
Subject: [PATCH] fix(nuxt): handle serialising empty bigint (#21257)

Co-authored-by: lorado <eugen.sacharow@gmx.de>
---
 .../src/app/plugins/revive-payload.client.ts  |  4 ++--
 .../src/app/plugins/revive-payload.server.ts  |  4 ++--
 test/fixtures/basic/nuxt.config.ts            | 19 +++++++++++++++++++
 test/fixtures/basic/pages/json-payload.vue    |  5 +++++
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/nuxt/src/app/plugins/revive-payload.client.ts b/packages/nuxt/src/app/plugins/revive-payload.client.ts
index b9d5c1498d..120ea14243 100644
--- a/packages/nuxt/src/app/plugins/revive-payload.client.ts
+++ b/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)),
-  EmptyRef: (data: any) => ref(data === '_' ? undefined : JSON.parse(data)),
+  EmptyShallowRef: (data: any) => shallowRef(data === '_' ? undefined : data === '0n' ? 0n : 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),
diff --git a/packages/nuxt/src/app/plugins/revive-payload.server.ts b/packages/nuxt/src/app/plugins/revive-payload.server.ts
index da952ad944..8fd810ffe1 100644
--- a/packages/nuxt/src/app/plugins/revive-payload.server.ts
+++ b/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) || '_'),
-  EmptyRef: (data: any) => isRef(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 && (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,
diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts
index a00baee16b..56e41638de 100644
--- a/test/fixtures/basic/nuxt.config.ts
+++ b/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',
diff --git a/test/fixtures/basic/pages/json-payload.vue b/test/fixtures/basic/pages/json-payload.vue
index 0825bde96c..e11d5f0809 100644
--- a/test/fixtures/basic/pages/json-payload.vue
+++ b/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>