Next.js: Preact: Error message about circular structure when using <Head> in Next 9.5.4+

Created on 13 Oct 2020 · 3Comments · Source: vercel/next.js

Bug report

Describe the bug

Hi, when using <Head> in a Next.js project that uses preact instead of react the following error is displayed:

Error: Circular structure in "getInitialProps" result of page "/". https://err.sh/vercel/next.js/circular-structure
This error happened while generating the page. Any console logs will be displayed in the terminal window.

It seem like the underlying issue is not getInitialProps, but instead the issue is caused by a __self reference in __NEXT_DATA__.head.

The problem was introduced by this PR https://github.com/vercel/next.js/pull/16758: head is now part of __NEXT_DATA__, which is not compatible with preact. preact attaches a __self and __source property to elements, which is causing a circular dependency error, when serializing __NEXT_DATA__, since __self will point to an object that has circular dependencies.

To Reproduce

Clone https://github.com/vercel/next.js/tree/canary/examples/using-preact
Upgrade to next.js 9.5.5 (eg. ncu -u && npm i)
Add a page:

// pages/bug.js
import React from 'react';
import Head from 'next/head';

export default function Bug() {
  return (
    <>
      <Head>
        <title>Title</title>
      </Head>
    </>
  );
}

npm run dev
Go to http://localhost:3000/bug
Error will show up

Inspecting __NEXT_DATA__, it will look like this, with the circular dependency in head:

__NEXT_DATA__: {
  props: { pageProps: { statusCode: 500 } },
  page: '/_error',
  query: {},
  buildId: 'development',
  assetPrefix: undefined,
  runtimeConfig: undefined,
  nextExport: undefined,
  autoExport: undefined,
  isFallback: false,
  dynamicIds: undefined,
  err: {
    name: 'Error',
    message: 'Circular structure in "getInitialProps" result of page "/". https://err.sh/vercel/next.js/circular-structure',
    stack: 'Error: Circular structure in "getInitialProps" result of page "/". https://err.sh/vercel/next.js/circular-structure\n' +
      '    at Function.getInlineScriptSource (webpack-internal:///./node_modules/next/dist/pages/_document.js:562:15)\n' +
      '    at NextScript.render (webpack-internal:///./node_modules/next/dist/pages/_document.js:619:28)\n' +
      '    at g (/Users/tw/preact-next/node_modules/preact-render-to-string/dist/index.js:1:2170)\n' +
      '    at g (/Users/tw/preact-next/node_modules/preact-render-to-string/dist/index.js:1:4036)\n' +
      '    at g (/Users/tw/preact-next/node_modules/preact-render-to-string/dist/index.js:1:4036)\n' +
      '    at g (/Users/tw/preact-next/node_modules/preact-render-to-string/dist/index.js:1:2353)\n' +
      '    at g (/Users/tw/preact-next/node_modules/preact-render-to-string/dist/index.js:1:2353)\n' +
      '    at g (/Users/tw/preact-next/node_modules/preact-render-to-string/dist/index.js:1:2353)\n' +
      '    at g (/Users/tw/preact-next/node_modules/preact-render-to-string/dist/index.js:1:2353)\n' +
      '    at renderDocument (/Users/tw/preact-next/node_modules/next/dist/next-server/server/render.js:3:669)'
  },
  gsp: undefined,
  gssp: undefined,
  customServer: true,
  gip: true,
  appGip: undefined,
  locale: undefined,
  locales: undefined,
  defaultLocale: undefined,
  head: [ [ 'meta', [Object] ], [ 'meta', [Object] ], [ 'title', [Object] ] ]
}

head[2]: [
  'title',
  {
    __self: {
      __v: [Object],
      context: [Object],
      props: [Object],
      setState: [Function: u],
      forceUpdate: [Function: u],
      __h: []
    },
    __source: {
      fileName: '/Users/tw/preact-next/pages/bug.js',
      lineNumber: 8,
      columnNumber: 9
    },
    children: 'Title'
  }
]

Expected behavior

No error message, when using preact
__self and __source should be removed before head-elements to __NEXT_DATA__

Screenshots

Screen Shot 2020-10-13 at 5 14 34 PM

System information

OS: macOS
Browser (if applies) Chome
Version of Next.js: 9.5.5
Version of Preact: 10.5.4
Version of Node.js: all

good first issue example

Source

tw00

👍13 👀3

Most helpful comment

This issue can be resolved by adding preact/debug to the server bundle. You can do so by importing it in either _document.js or _app.js. But this will uncover a bug in preact-render-to-string that will be fixed by this PR: https://github.com/preactjs/preact-render-to-string/pull/172.

Until then either stay with an older version of next.js or try out [email protected] (https://github.com/sventschui/next-plugin-preact) that adds a monkey patch until preact-render-to-string is released with a proper bugfix.

Edit: [email protected] was just released and thus adding preact/debug to _app.js or _document.js and upgrading preact-render-to-string should fix the issue

sventschui on 21 Oct 2020

👍4

All 3 comments

I didn't find or know about this issue before opening https://github.com/developit/nextjs-preact-demo/issues/25
I found that if you remove the children of <Head> in _app.js and keep the <Head> in _document.js this error is gone.

wis on 15 Oct 2020

👍1

Edit: [email protected] was just released and thus adding preact/debug to _app.js or _document.js and upgrading preact-render-to-string should fix the issue

sventschui on 21 Oct 2020

👍4

Thank you @sventschui for maintaining this plugin, I confirm that the issue is fixed now with the update of preact-render-to-string 👍