Skip to content

Next.js 15 Circular Structure Error When passing domNode to another server component #1589

Open
@webplantmedia

Description

@webplantmedia

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} />;
				}
			}
		}
	}

Activity

changed the title [-]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[/+] on Nov 1, 2024
remarkablemark

remarkablemark commented on Nov 1, 2024

@remarkablemark
Owner

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

webplantmedia commented on Nov 1, 2024

@webplantmedia
Author

Happening all on the server side. I read in HTML from an API. I parse the content like so:

  const html = parse(content, options);

My options are defined similar to the code here:

const options: HTMLReactParserOptions = {
    replace(domNode) {
      if (domNode instanceof Element && domNode.attribs) {
        if (domNode.name === 'ul') {
          return <CustomList node={domNode} />;
				}
			}
		}
	}

Next 14, no error. Next 15, Circular Structure Error.

remarkablemark

remarkablemark commented on Nov 1, 2024

@remarkablemark
Owner

Gotcha I'll try to reproduce this in the example Next.js app in this repository when I have some time today

remarkablemark

remarkablemark commented on Nov 1, 2024

@remarkablemark
Owner

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

added a commit that references this issue on Nov 1, 2024
remarkablemark

remarkablemark commented on Nov 1, 2024

@remarkablemark
Owner

My suspicion is that it's coming from this line:

<CustomList node={domNode} />

Do you call JSON.stringify on domNode in <CustomList>?

webplantmedia

webplantmedia commented on Nov 1, 2024

@webplantmedia
Author

Even this is producing the error for me:

  const options: HTMLReactParserOptions = {
    replace(domNode) {
      function test(node: any) {
        console.log(node);
      }
      test(domNode);
    },
  };
  const html = parse(content, options);

  return <>{html}</>;

Error output:

Error: Converting circular structure to JSON
    --> starting at object with constructor 'Element'
    |     property 'next' -> object with constructor 'Element'
    --- property 'prev' closes the circle
    at test (rsc://React/Server/webpack-internal:///(rsc)/./components/blocks/parse-blocks.tsx?2:17:25)
    at Object.replace (rsc://React/Server/webpack-internal:///(rsc)/./components/blocks/parse-blocks.tsx?3:19:13)
    at ParseBlocks (rsc://React/Server/webpack-internal:///(rsc)/./components/blocks/parse-blocks.tsx?4:22:79)
    at resolveErrorDev (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1792:63)
    at processFullStringRow (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2071:17)
    at processFullBinaryRow (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2059:7)
    at progress (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2262:17)
image
remarkablemark

remarkablemark commented on Nov 1, 2024

@remarkablemark
Owner

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

webplantmedia commented on Nov 1, 2024

@webplantmedia
Author

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

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

page.tsx

import parse, { Element } from 'html-react-parser';

type Props = {
  params: { slug: string };
};

export default async function Page({ params }: Props) {
  return (
    <main>
      <h1 className="title">
        {parse(
          `
            Welcome to <a href="https://nextjs.org">Next.js</a>
            and HTMLReactParser!
          `,
          {
            replace(domNode) {
              function test(node: any) {
                console.log(node);
              }
              test(domNode);

              if (domNode instanceof Element && domNode.name === 'a') {
                return (
                  <a href="https://nextjs.org" rel="noopener noreferrer">
                    Next.js
                  </a>
                );
              }
            },
          }
        )}
      </h1>
    </main>
  );
}

Error:

Error: Converting circular structure to JSON
    --> starting at object with constructor 'Text'
    |     property 'next' -> object with constructor 'Element'
    --- property 'prev' closes the circle
    at test (rsc://React/Server/webpack-internal:///(rsc)/./app/page.tsx?0:20:33)
    at Object.replace (rsc://React/Server/webpack-internal:///(rsc)/./app/page.tsx?1:22:21)
    at Page (rsc://React/Server/webpack-internal:///(rsc)/./app/page.tsx?2:14:84)
    at resolveErrorDev (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1792:63)
    at processFullStringRow (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2071:17)
    at processFullBinaryRow (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2059:7)
    at progress (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:2262:17)
image

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "html-react-parser": "^5.1.18",
    "next": "^15.0.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/node": "22.8.6",
    "@types/react": "18.3.12",
    "typescript": "5.6.3"
  }
}
remarkablemark

remarkablemark commented on Nov 1, 2024

@remarkablemark
Owner

Can you fork and create a branch with these changes? @webplantmedia

webplantmedia

webplantmedia commented on Nov 1, 2024

@webplantmedia
Author

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

remarkablemark commented on Nov 1, 2024

@remarkablemark
Owner

Thanks! I'll take a look later today @webplantmedia

8 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

questionFurther information is requested

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @webplantmedia@remarkablemark

      Issue actions

        Next.js 15 Circular Structure Error When passing `domNode` to another server component · Issue #1589 · remarkablemark/html-react-parser