Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

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

Issue Analytics

State:
Created 3 years ago
Reactions:16
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

sventschuicommented, Oct 21, 2020

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

1reaction

ckybonistcommented, Nov 27, 2020

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');
}

Top Results From Across the Web

NextJS and Redux-thunk: Getting 'Error: Circular structure in ...

When you return data from axios, one has to access the data within the data, to wit, instead of. const data = await...

OpenStax College Success - LibreTexts

This text is disseminated via the Open Education Resource (OER) LibreTexts Project (https://LibreTexts.org) and like the hundreds.

Bombs | PDF | Chlorine | Gunpowder - Scribd

First you take a knife and cut a small round hole on the tennis ball. Next ... When cutting, with explosives, part of...

Smart Sustainable Cities of the Future - Planning Insights

With new scientific discoveries and technological innovations, most notably big data analytics and context-aware computing as powerful drivers for the next ...

Testing JavaScript Applications by da Costa, Lucas (z-lib.org)

Using a separate database also makes it easier to determine a bug's root cause. ... These new tests will be used by the...