Preact: Error message about circular structure when using <Head> in Next 9.5.4+ #17854
Description
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 __selfand__sourceshould 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