Closed jlmodell closed 3 years ago
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 :)
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 can you provide a codesandbox or something to reproduce?
I'm getting the same issue as @cyrus-za.
Seems to be coming from _document & _app pageProps
repro for you here: https://github.com/goleary/superjson-repro
npx create-next-app
.getServerSideProps
to index.ts
which spits out a Date
object.babel-plugin-superjson-next
& @babel/core
(which is not mentioned in the docs but pretty obvious that it's needed)..babelrc
{
"presets": ["next/babel"],
"plugins": [
"superjson-next" // 👈
]
}
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
@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.
Thanks for the repro, I'll take a look in the coming days.
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 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:
npm install
from the root and npm run dev
to run the project)superjson
using both npm
& yarn
(not mentioned as required in the readme, but you mention needing to install it in your message above.)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
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 :)
@allcontributors add goleary for bug
@Skn0tt
I've put up a pull request to add @goleary! :tada:
@allcontributors add cyrus-za for bug
@Skn0tt
I've put up a pull request to add @cyrus! :tada:
@allcontributors add jlmodell for bug
@Skn0tt
I've put up a pull request to add @jlmodell! :tada:
I've published 0.1.9
, which should fix the windows incompatibility issues.
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.
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!
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 ...
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.
@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
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
@allcontributors add "cyrus-za" for bug
@Skn0tt
Could not find the user "cyrus-
on github.
@cyrus-za just added you manually 😅
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.
Could you open a separate issue for this?
@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.
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 :)
Should superjson
be a dev or prod dependency?
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:
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.
It still returned the error re: Error serializing
.date
returned fromgetServerSideProps
unfortunately.I commented it all out and went back to test a basic example.
And it still returned
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.