search

developit / nextjs-preact-demo

Next.js 9.3 + Preact = 21kB
https://nextjs-preact.now.sh
384 stars 25 forks source link

"Circular structure in "getInitialProps" result of page" Error after adding _document.js and _app.js with <Head> #25

Closed wis closed 3 years ago

wis commented 3 years ago

Hey Jason, thank you for making Preact and this repo :smiley:

All I did was add a _document.js and _app.js with a next/head element:

_document.js:

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* PWA primary color */}
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  const initialProps = await Document.getInitialProps(ctx);
  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [...React.Children.toArray(initialProps.styles)],
  };
};

_app.js:

import React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';

export default function MyApp(props) {
  const { Component, pageProps } = props;

  return (
    <React.Fragment>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <Component {...pageProps} />
    </React.Fragment>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

and now it errors on SSR:

Error: Circular structure in "getInitialProps" result of page "/". https://err.sh/vercel/next.js/circular-structure
    at Function.getInlineScriptSource (webpack-internal:///./node_modules/next/dist/pages/_document.js:561:15)
    at NextScript.render (webpack-internal:///./node_modules/next/dist/pages/_document.js:618:28)
    at g (/home/x/d/nextjs-preact-demo/node_modules/preact-render-to-string/dist/index.js:1:2170)
    at g (/home/x/d/nextjs-preact-demo/node_modules/preact-render-to-string/dist/index.js:1:4036)
    at g (/home/x/d/nextjs-preact-demo/node_modules/preact-render-to-string/dist/index.js:1:4036)
    at g (/home/x/d/nextjs-preact-demo/node_modules/preact-render-to-string/dist/index.js:1:2353)
    at g (/home/x/d/nextjs-preact-demo/node_modules/preact-render-to-string/dist/index.js:1:2353)
    at g (/home/x/d/nextjs-preact-demo/node_modules/preact-render-to-string/dist/index.js:1:2353)
    at g (/home/x/d/nextjs-preact-demo/node_modules/preact-render-to-string/dist/index.js:1:2353)
    at renderDocument (/home/x/d/nextjs-preact-demo/node_modules/next/dist/next-server/server/render.js:3:669)

errss2 errss

when you comment out the <Head> tag in _app.js the error is gone, I didn't need to comment it out in _document.js where I'm using it similarly, which is puzzling.

here's the repro repo (forked from this): https://github.com/wis/nextjs-preact-demo

osdevisnot commented 3 years ago

@wis this appears to be resolved with latest version of next and preact. So once #26 is merged this should work by default.

wis commented 3 years ago

Hey @osdevisnot I tried your patch in #26, installed the newer packages, I also tried installing preact from the master branch which was last committed to 4 days ago, 6 days after the last release (didn't try installing next from repo, bc it's big), and the same issue persisted.

What I've found out though, interestingly, is that this error only happens in dev mode, and not in serve mode. <-- might be relevant/useful (along with info in OP) to https://github.com/vercel/next.js/issues/17854

You might have found that it was resolved in serve mode, can you try dev mode?

osdevisnot commented 3 years ago

Indeed, this happens only in dev mode. I verified removing __self fixes this problem, but I am not sure if that's the correction solution here. As a workaround, downgrading next to 9.5.3 fixes this issue.