Can't seem to get it working

[jlmodell]

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".

[Skn0tt]

That seems about right, weird that it doesn't work for you. Could you provide a reproduction repository / codesandbox? I'll take a look at it :)

[cyrus-za]

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 😱

[flybayer]

@cyrus-za can you provide a codesandbox or something to reproduce?

[dillondotzip]

I'm getting the same issue as @cyrus-za.

Seems to be coming from _document & _app pageProps

[goleary]

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

[cyrus-za]

@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.

[Skn0tt]

Thanks for the repro, I'll take a look in the coming days.

[Skn0tt]

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?

[goleary]

@Skn0tt thanks for looking in to it!

It wasn't a real repro, though: package-lock.json was missing,

Using npx create-next-app I get a project with a yarn.lock file included. I installed babel-plugin-superjson-next using yarn, not npm.

You shouldn't need to install this (@babel/core), as Next.js already comes with it. Maybe that's a source of error?

hmm...both times I've tried to use babel-plugin-superjson-next from a fresh install I get an error about @babel/core missing.

After an explicit install (yarn add -D @babel/core) I see this in the log while running yarn dev: info - Using external babel configuration from C:\Users\olear\github\next-app\.babelrc so it seems like the babel config is working?

I made your change and still see the same error when running yarn dev

I also tried a few other things, none of which solved the problem:

• using npm instead of yarn (npm install from the root and npm run dev to run the project)
• using node 14.15.3 in stead of 12x
• explicitly installed superjson using both npm & yarn (not mentioned as required in the readme, but you mention needing to install it in your message above.)

[Skn0tt]

Seems like I've overlooked the yarn.lock, sorry 😅

Tried it again, still works on my machine. Since you're on windows, maybe it's a bug with backslashes in path or smth...

I don't have a Windows machine right now, but I'll add some to the CI. Maybe that'll uncover the underlying problem :D

[Skn0tt]

Alright, it indeed seems to be a windows problem: https://github.com/blitz-js/babel-plugin-superjson-next/pull/24/checks?check_run_id=1633311837

Looking into it now :)

[Skn0tt]

@allcontributors add goleary for bug

[allcontributors[bot]]

@Skn0tt

I've put up a pull request to add @goleary! :tada:

[Skn0tt]

@allcontributors add cyrus-za for bug

[allcontributors[bot]]

@Skn0tt

I've put up a pull request to add @cyrus! :tada:

[Skn0tt]

@allcontributors add jlmodell for bug

[allcontributors[bot]]

@Skn0tt

I've put up a pull request to add @jlmodell! :tada:

[Skn0tt]

I've published 0.1.9, which should fix the windows incompatibility issues.

[goleary]

Thanks again for looking into it!

Sadly after upgrading to 0.1.9 I'm still experiencing the same issue.

I went ahead and pushed the change to my repro.

[goleary]

Decided to do some more digging.

I threw some console.log statements into this package's index.js:

console.log('index.js')
function superJsonWithNext() {
  console.log('superJsonWithNext')
    return {
        name: 'replace gSSP',
        visitor: {
            Program: function (path, state) {
                var _a;
                console.log('Program')
                var filename = (_a = getFileName(state)) 
                ...

and noticed that none of them were getting hit except for the global (index.js).

Then I switched the plugin to be the full name of the package in .babelrc and managed to get it working:

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

I don't know anything about babel plugins, so I'm not sure how the name resolution works but this should help you track it down...or update the docs to use the full package name.

I yet again updated my repo which is now functional!

[Skn0tt]

Alright, so at least the windows problems are fixed.

I'm not so sure about the name resolution thing, too - but given that our CI test uses superjson-next, I'm kind of suprised. Could you maybe try out superjson-next in a blank project? Maybe it was some caching issue ...

[goleary]

Just tried that out, and indeed with a new project I have no issues. Must've been a caching issue.

On a side note, I still get an error every time I follow the instructions in this readme for a blank Next.js project. @babel/core is a devDependency of Next.js which means it won't be installed unless I'm working in the Next repo itself.

I'm sometimes unsure of what truly belongs as a dev vs normal dependency. In the case of this package, it's unusable without @babel/core so I think that means it should be a normal dependency. Even though it's not needed "in production".

Or at the very least a peer dependency so there is some kind of warning when the user installs this without having @babel/core installed.

[cyrus-za]

@Skn0tt My issue was on mac. I have not used superjson yet since the last message, but will see if I can find time to get a repro up.

@goleary devdependencies do get installed alongside the deps. The only difference is when you want to host a node server somewhere you can do yarn install --production which will not install any devdependencies (thus saving you some storage). Think of like hosting a nextjs app. You can build it with babel and webpack and then just host the static files somewhere, but if some of your pages use SSR then you'd want to run it in some node environment, but you wont need babel for it or typescript (as you already compiled it down to js)

PS. @Skn0tt it does not seem like the contributors bot respects the hyphenated username (maybe try quotes). See PR https://github.com/blitz-js/babel-plugin-superjson-next/pull/26

[flybayer]

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

[Skn0tt]

@allcontributors add "cyrus-za" for bug

[allcontributors[bot]]

@Skn0tt

Could not find the user "cyrus- on github.

[Skn0tt]

@cyrus-za just added you manually 😅

[nonoumasy]

Is there a fix for this? I installed both packages, created the .babelrc per the instructions here but still getting...

Server Error Error: Error serializing .data[0].updatedAt returned from getServerSideProps in "/". Reason: object ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types.

[Skn0tt]

Could you open a separate issue for this?

[ACPK]

@Skn0tt What is the solution to solve this error? I'm using a Mac.

I followed @cyrus-za comment on uninstalling "superjson and manually converted all dates to ISO before sending props down" to fix the issue.

[Skn0tt]

The solution to this issue was published in 0.1.9, if you‘re still seeing it that’s new. Please open another issue with a repro then, these things are hard to debug :)

[nemanjam]

Should superjson be a dev or prod dependency?