babel-plugin-superjson-next: Can't seem to get it working

I’m using superjson ^1.4.1, next 10.0.2, react 17.0.1, @babel/core ^7.12.10

I added the .babelrc file:

{

  "presets": ["next/babel"],
  "plugins": ["superjson-next"]
}

I reloaded my next app that I was trying to fix.

I’m using @prisma/client to query the db inside getServerSideProps where created_at/updated_at are returning Dates.

interface Task {
  id string;
  created_at: Date;
  updated_at: Date;
  ...
}

export async function getServerSideProps() {
  // return type of Task[] is inferred
  const tasks = await prisma.user.findUnique({ where: { email }).task({ orderBy: { created_at: "desc" }, take: 10 })
 
  return {
    props: {
      tasks
    }
  }
}

It still returned the error re: Error serializing .date returned from getServerSideProps unfortunately.

I commented it all out and went back to test a basic example.

export async function getServerSideProps() {
  return {
    props: {
      date: new Date(0),
    },
  };
}

And it still returned

Server Error
Error: Error serializing `.date` returned from `getServerSideProps` in "/experimental/tasks".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

I did notice that when I yarn installed on another computer there was a warning re: peer dependencies, but I’m not entirely sure if it is a warning that means it will not work at all because I am using next 10 & react 17 or just a general warning.

warning " > babel-plugin-superjson-next@0.1.8" has incorrect peer dependency "next@9.X".
warning " > babel-plugin-superjson-next@0.1.8" has incorrect peer dependency "react@16.X".

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 32 (21 by maintainers)

Most upvoted comments

For me its not working either. Also using prisma with next. But I dont get those errors. After adding the babel plugin, all my pages are getting ther props as undefined 😱

cyrus-za on Dec 17, 2020

@allcontributors add “cyrus-za” for bug

Skn0tt on Jan 27, 2021

@cyrus-za just added you manually 😅

Skn0tt on Jan 27, 2021

Hey all, I have seen that somehow Next.js/blitz caches the babel config.

I have found that when testing babel stuff, you need to delete .blitz or .next to see the results. Or with blitz run blitz start --no-incremental-build

flybayer on Jan 21, 2021

https://github.com/goleary/superjson-repro/commit/d4130b78ebe1c714ee3ca1169d0598aa23d4264c works on my machine. It wasn’t a real repro, though: package-lock.json was missing, I had to npm install superjson and I needed to make this change to see something:

 import Head from "next/head";
-import { GetServerSideProps } from "next";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
 import styles from "../styles/Home.module.css";
 
@@ -11,7 +11,7 @@ export const getServerSideProps: GetServerSideProps = async ({ params }) => {
   };
 };
 
-export default function Home() {
+export default function Home(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
     <div className={styles.container}>
       <Head>
@@ -20,6 +20,7 @@ export default function Home() {
       </Head>
 
       <main className={styles.main}>
+        {props.date.toISOString()}
         <h1 className={styles.title}>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
         </h1>

That could have lead to some difference in our setups. Could you update the repro to be fully self-contained, so we’re on the same page?

@babel/core (which is not mentioned in the docs but pretty obvious that it’s needed).

You shouldn’t need to install this, as Next.js already comes with it. Maybe that’s a source of error?

Skn0tt on Dec 31, 2020

@flybayer I only saw this now. I see @goleary already create a reproduction above. Shout if you need anything else. I’ve sine uninstalled superjson and manually converted all dates to ISO before sending props down.

cyrus-za on Dec 31, 2020

repro for you here: https://github.com/goleary/superjson-repro

I created a brand new next app using npx create-next-app.
added getServerSideProps to index.ts which spits out a Date object.
then added babel-plugin-superjson-next & @babel/core (which is not mentioned in the docs but pretty obvious that it’s needed).
added .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    "superjson-next" // 👈
  ]
}

run yarn dev

I still get this error:

Error: Error serializing `.date` returned from `getServerSideProps` in "/".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.

I tested manual usage of superjson and it works as intended.

dependencies:

"dependencies": {
    "next": "10.0.4",
    "react": "17.0.1",
    "react-dom": "17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@types/node": "^14.14.17",
    "@types/react": "^17.0.0",
    "babel-plugin-superjson-next": "^0.1.8",
    "typescript": "^4.1.3"
  }

env: Windows 10 & node 12.19.1

goleary on Dec 31, 2020