SyntaxError: Unexpected token u in JSON at position 0

I’m getting this error on building my site:

12:01:06 PM: Error occurred prerendering page "/academia". Read more: https://err.sh/next.js/prerender-error 12:01:06 PM: SyntaxError: Unexpected token u in JSON at position 0 12:01:06 PM: at JSON.parse (<anonymous>) 12:01:06 PM: at getStaticProps (/opt/build/repo/.next/server/pages/academia.js:3182:27) 12:01:06 PM: at processTicksAndRejections (internal/process/task_queues.js:97:5) 12:01:06 PM: at async renderToHTML (/opt/build/repo/node_modules/next/dist/next-server/server/render.js:28:109) 12:01:06 PM: at async Object.exportPage [as default] (/opt/build/repo/node_modules/next/dist/export/worker.js:25:6)

The point is that this building configuration works ok on Vercel, but it doesn’t here on Netlify.
Basically I’ve followed the recommendations posted here to deal with undefined values.

return { props: JSON.parse(JSON.stringify(props)) }
This workaround works on Vercel, but not here on Netlify. Any suggestion?

hmm, interesting. Does this work locally?

yes, it works locally and also compiles (yarn build)

hmm, I’m really not sure, and the person who i think might be able to help us understand what is happening here is out this week. I’ll try and do some more digging and see if we can get more information.

Hey @rodbs :wave:t2:

To be honest, return { props: JSON.parse(JSON.stringify(props)) } seems a little… :thinking: strange to me. If props is undefined, your JSON.stringify() is going to return undefined and then the parse() is going to error in exactly the way you posted. I’m not sure why that would behave differently on Netlify or Vercel if you’re using Vercel for static hosting - but if you’re using Vercel for it’s Next.js runtime hosting (which is fundamentally quite different than Netlify) then you may not get that error when it first starts, but you may get that error once you try to hit that page. Not sure.

Anywho, are you up for trying this instead?

return props || {}

That should just return your props directly or if they’re undefined for one reason or another, an empty object instead of erroring. In you need to return an object with the props key containing your data, this would be that variant:

return { props: props || {} }

Hope that helps!


Jon