Next.js Discord

Discord Forum

BigInt serialization

Answered
Paul posted this in #help-forum
Open in Discord
Avatar
PaulOP
Hi! I've had a web app project running for quite a while, and coming back to programming it I first wanted to update all dependencies, including NextJS, which initially was in version 12.1.1, which i've updated to 15.0.2.

The main idea of the app is to be a chat, with a more complex events calendar and permission system. The default page is the calendar one, which includes a function retrieving from the database the roles table, which are all indexed using a BigInt id column, which in the Next v12 looked the following:

export async function getServerSideProps(){
  return {props:{rolesSSR: JSON.parse(JSON.stringify(await getRoles())} as ServersideProps}
}


For the update, i've made a new project to avoid npm version conflicts, making a new clean install of both next and other dependencies. This same file now gives me the following error:

  219 |
  220 | export async function getServerSideProps(){
> 221 |   return {props:{rolesSSR: JSON.parse(JSON.stringify(await getRoles()))} as ServersideProps}
      |                                            ^
  222 | }
 ⨯ pages/events/index.tsx (221:44) @ stringify
 ⨯ TypeError: Do not know how to serialize a BigInt


I am unsure if it is nextjs related or not, but I believe so as the biggest dependency update i've made is next, and I haven't changed the data types or db format. I've tried modifying the stringify function in order to replace BigInt for Numbers, with the following:

export async function getServerSideProps(){
  return {props:{rolesSSR: JSON.parse(JSON.stringify(await getRoles(), (_, v) => typeof v == 'bigint' ? Number(v) : v))} as ServersideProps}
}


But unfortunately this same code now gives me about the same error, but without a clear reference to that line:

TypeError: Do not know how to serialize a BigInt
    at JSON.stringify (<anonymous>)
    at /Users/paul/Desktop/Dev/Solar/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:392
    at res.send (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:889)
    at Array.eval (webpack-internal:///(api)/./pages/api/listens/index.ts:165:21)
    at async file:///Users/paul/Desktop/Dev/Solar/node_modules/next-connect/dist/esm/node.js:54:21
    at async apiResolver (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:3901)
    at async PagesAPIRouteModule.render (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/compiled/next-server/pages-api.runtime.dev.js:21:5372)
    at async DevServer.runApi (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/server/next-server.js:618:9)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/server/next-server.js:278:37)
    at async DevServer.handleRequestImpl (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/server/base-server.js:877:17)
    at async /Users/paul/Desktop/Dev/Solar/node_modules/next/dist/server/dev/next-dev-server.js:373:20
    at async Span.traceAsyncFn (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/trace/trace.js:153:20)
    at async DevServer.handleRequest (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/server/dev/next-dev-server.js:370:24)
    at async invokeRender (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/server/lib/router-server.js:183:21)
    at async handleRequest (/Users/paul/Desktop/Dev/Solar/node_modules/next/dist/server/lib/router-server.js:360:24)


The error not quoting any of my own files, i'm unsure of where it is from, and of how to fix it, if anyone has an idea, I'm taking 🙂
Answered by Yi Lon Ma
You can use superjson instead of the default JSON or cast those bigints to string
View full answer

15 Replies

Avatar
Yi Lon Ma
You can use superjson instead of the default JSON or cast those bigints to string
Answer
Avatar
Yi Lon Ma
JSON.stringify can't work with bigints
Avatar
James4u (Tag me if needed)
@Paul
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/BigInt_not_serializable
https://stackoverflow.com/questions/65152373/typescript-serialize-bigint-in-json
Avatar
PaulOP
Yep, i've seen this and the error code is quite explicit, but what i can't figure out is the fact that the error does not come from one of my files, it's a call from next internal router files
Avatar
Yi Lon Ma
nextjs serializes the data you pass from getServerSideProps and then pass that to pages
Avatar
James4u (Tag me if needed)
so you have to pre-process your bigInt before next.js tries to serialize it
Avatar
PaulOP
I'll try with superjson as suggested above
But the (_, v) => typeof v == 'bigint' ? Number(v) : v parameter is supposed to replace those bigints for numbers isn't it?
Or the data might be used somewhere else with the included bigints
Avatar
PaulOP
Okay, so with superjson I indeed no longer have the type error, but I've got a new one 😅 
 ⨯ uncaughtException: TypeError: The "payload" argument must be of type object. Received null
    at frame (file:///C:/Users/Paul/Desktop/dev/le%20trefle/Solar/node_modules/next/src/server/patch-error-inspect.ts:75:42)
    at getSourcemappedFrameIfPossible (file:///C:/Users/Paul/Desktop/dev/le%20trefle/Solar/node_modules/next/src/server/patch-error-inspect.ts:165:32)
    at parseAndSourceMap (file:///C:/Users/Paul/Desktop/dev/le%20trefle/Solar/node_modules/next/src/server/patch-error-inspect.ts:220:23)
    at exit (file:///C:/Users/Paul/Desktop/dev/le%20trefle/Solar/node_modules/next/src/server/patch-error-inspect.ts:210:32)
    at error (file:///C:/Users/Paul/Desktop/dev/le%20trefle/Solar/node_modules/next/src/server/lib/start-server.ts:300:18) {
  code: 'ERR_INVALID_ARG_TYPE'
}


Once again the error call comes from next, so quite unsure if i'm making a wrong request somewhere or smth. This error occurs during loading, not compiling if it helps 🙂
That might actually come from something else and be a different error, I'll investigate it further
Avatar
PaulOP
Hi again 🙂
Keeping this thread open, as I've got a similar issue. One of the server's enpoints is the authentification api endpoint, which basically checks for the user in the database, you can consult is here : https://hastebin.skyra.pw/aqilidobav.js (too long for Discord).
When requested for a login, this endpoint throws me the following error :

 ✓ Compiled /api/auth/login in 102ms (178 modules)
TypeError: Do not know how to serialize a BigInt
    at JSON.stringify (<anonymous>)
    at toString (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\jws\lib\tostring.js:9:15)
    at jwsSecuredInput (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\jws\lib\sign-stream.js:21:34)
    at Object.jwsSign [as sign] (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\jws\lib\sign-stream.js:31:22)
    at module.exports (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\jsonwebtoken\sign.js:246:25)
    at Array.eval (webpack-internal:///(api)/./pages/api/auth/login.ts:75:72)
    at async file:///C:/Users/Paul/Desktop/dev/le%20trefle/Solar/node_modules/next-connect/dist/esm/node.js:54:21
    at async apiResolver (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\compiled\next-server\pages-api.runtime.dev.js:21:3901)
    at async PagesAPIRouteModule.render (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\compiled\next-server\pages-api.runtime.dev.js:21:5372)
    at async DevServer.runApi (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\server\next-server.js:618:9)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\server\next-server.js:278:37)
    at async DevServer.handleRequestImpl (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\server\base-server.js:877:17)
    at async C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\server\dev\next-dev-server.js:373:20
    at async Span.traceAsyncFn (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\trace\trace.js:153:20)
    at async DevServer.handleRequest (C:\Users\Paul\Desktop\dev\le trefle\Solar\node_modules\next\dist\server\dev\next-dev-server.js:370:24)
 POST /api/auth/login 500 in 176ms


Up to my interpretation, this error is quite similar to the previous one, but the call stack refers to line 75:
res.status(401).send("invalid credentials")


First of all, considering it is a testing, all the accounts just have a simple "password" as password, so i'm quite sure it is correct, don't really understand why we finish with a call on that line, but it doesn't really change the overall problem that next interprets a call from a BigInt value, which I can't figure the location of.

Any ideas? 😅
+ as suggested above, i've converted all the native node JSON calls to superjson trying to solve it, didn't improve the situation
Avatar
PaulOP
The issue accually comed from jsonwebtoken, which tried to serielize the same BigInt id on the user object as before, superjson allowed to fix it, thanks!