Circular References error when linking posts to each other

APIs Content Delivery API
,
1

I am getting the following error when linking posts (products) to each other in my “related products” section.

SerializableError: Error serializing .data[0].relatedProducts[0].fields.relatedProducts[0].fields returned from getServerSideProps in “/products/[slug]”.
Reason: Circular references cannot be expressed in JSON (references: .data[0]).

I have tried both “contentful”: “^7.14.0” and "“contentful”: “^7.1.0-beta1”.

1 Like
2

The only solution I’ve come up with so far is to implement https://www.npmjs.com/package/safe-json-stringify to convert the data to string and then JSON.parse the stringified data.

3

This appears to be an issue with NextJS.

Re: https://github.com/vercel/next.js/blob/86160a5190c50ea315c7ba91d77dfb51c42bc65f/packages/next/lib/is-serializable-props.ts#L26

Can anyone suggest a more performant workaround other than stringifying, then reparsing?

4

Commented on issue: https://github.com/vercel/next.js/discussions/10992
Opened new issue: https://github.com/vercel/next.js/discussions/18022

5

I am bumping this for mods/devs to see.

There should be documentation on how to fetch a rich text body which contains links to entries, which contains links to entries, without everything breaking because of circular reference.

2 Likes