Open
Description
I'm not sure if this is a bug, or some problem with my NextJS environment, but in Next 14, I could pass domNode from within the replace() function to other server components, and keep my react customizations more organized. But after upgrading to Next 15, I'm getting the following error:
[ Server ] Error: Converting circular structure to JSON
--> starting at object with constructor 'Element'
| property 'prev' -> object with constructor 'Element'
--- property 'next' closes the circle
Is this a bug?
const options: HTMLReactParserOptions = {
replace(domNode) {
if (domNode instanceof Element && domNode.attribs) {
if (domNode.name === 'ul') {
return <CustomList node={domNode} />;
}
}
}
}
Metadata
Metadata
Assignees
Projects
Milestone
Relationships
Development
No branches or pull requests
Activity
[-]Circular Structure When passing domNode to another server component in Next 15[/-][+]Circular Structure Error When passing domNode to another server component in Next 15[/+]remarkablemark commentedon Nov 1, 2024
Can you provide a reproducible example @webplantmedia? Is this happening on the server-side or client-side? Just curious: if you render with
'use client'
, does the same error appear?webplantmedia commentedon Nov 1, 2024
Happening all on the server side. I read in HTML from an API. I parse the content like so:
My options are defined similar to the code here:
Next 14, no error. Next 15, Circular Structure Error.
remarkablemark commentedon Nov 1, 2024
Gotcha I'll try to reproduce this in the example Next.js app in this repository when I have some time today
remarkablemark commentedon Nov 1, 2024
I upgraded the example Next.js app to v15 and I wasn't able to reproduce your error: https://github.com/remarkablemark/html-react-parser/tree/master/examples/nextjs
Let me know if there's anything I can adjust to reproduce your error
chore(examples): add replace to nextjs
remarkablemark commentedon Nov 1, 2024
My suspicion is that it's coming from this line:
Do you call
JSON.stringify
ondomNode
in<CustomList>
?webplantmedia commentedon Nov 1, 2024
Even this is producing the error for me:
Error output:
remarkablemark commentedon Nov 1, 2024
Do you get the same error if you do this in the example Next.js app? https://github.com/remarkablemark/html-react-parser/tree/master/examples/nextjs
webplantmedia commentedon Nov 1, 2024
Yes, I do get the same error when in the app directory. No error if in the pages directory. Here is my code in the app directory.
layout.tsx
page.tsx
Error:
package.json
remarkablemark commentedon Nov 1, 2024
Can you fork and create a branch with these changes? @webplantmedia
webplantmedia commentedon Nov 1, 2024
https://github.com/webplantmedia/html-react-parser
I just pushed a commit with the code. Thanks so much for looking into it! I have based a very big next js project in using this react parser. I'm hoping there is an easy fix to this without having to refactor lots of code.
https://github.com/webplantmedia/html-react-parser/tree/master/examples/nextjs
remarkablemark commentedon Nov 1, 2024
Thanks! I'll take a look later today @webplantmedia
8 remaining items