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

tw00 · 2020-10-13T21:23:18Z

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 #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

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

The text was updated successfully, but these errors were encountered:

wis · 2020-10-15T19:50:02Z

I didn't find or know about this issue before opening developit/nextjs-preact-demo#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.

sventschui · 2020-10-21T19:24:58Z

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: preactjs/preact-render-to-string#172.

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

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

iam4x · 2020-10-26T11:18:39Z

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

amannn · 2020-11-26T10:05:20Z

Just a note: I found that adding preact/debug in _app quite heavily increases TBT of the page. Adding it in _document seems to be the better choice for me.

ckybonist · 2020-11-26T11:39:42Z

Just a note: I found that adding preact/debug in _app quite heavily increases TBT of the page. Adding it in _document seems to be the better choice for me.

You could import it only on development.

if (process.env.NODE_ENV === 'development') {
  require('preact/debug');
}

timneutkens · 2021-06-21T14:03:25Z

This issue was solved by reverting the changes to next/head a while ago.

balazsorban44 · 2022-01-28T05:05:33Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens added good first issue Easy to fix issues, good for newcomers examples Issue was opened via the examples template. labels Oct 14, 2020

wis mentioned this issue Oct 16, 2020

"Circular structure in "getInitialProps" result of page" Error after adding _document.js and _app.js with <Head> developit/nextjs-preact-demo#25

Closed

hi019 mentioned this issue Oct 16, 2020

Circular structure errors preactjs/next-plugin-preact#10

Closed

osdevisnot mentioned this issue Oct 19, 2020

Failed to execute 'createElement' on 'Document' | v9.5.4 #17721

Closed

littletof mentioned this issue Oct 24, 2020

'Circular structure in "getInitialProps" result of page' error after npm install denoland/dotland#1573

Closed

timneutkens closed this as completed Jun 21, 2021

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

tw00 commented Oct 13, 2020 •

edited

Loading

wis commented Oct 15, 2020 •

edited

Loading

sventschui commented Oct 21, 2020 •

edited

Loading

iam4x commented Oct 26, 2020

amannn commented Nov 26, 2020

ckybonist commented Nov 26, 2020 •

edited

Loading

timneutkens commented Jun 21, 2021

balazsorban44 commented Jan 28, 2022

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

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

Comments

tw00 commented Oct 13, 2020 • edited Loading

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

wis commented Oct 15, 2020 • edited Loading

sventschui commented Oct 21, 2020 • edited Loading

iam4x commented Oct 26, 2020

amannn commented Nov 26, 2020

ckybonist commented Nov 26, 2020 • edited Loading

timneutkens commented Jun 21, 2021

balazsorban44 commented Jan 28, 2022

tw00 commented Oct 13, 2020 •

edited

Loading

wis commented Oct 15, 2020 •

edited

Loading

sventschui commented Oct 21, 2020 •

edited

Loading

ckybonist commented Nov 26, 2020 •

edited

Loading