CODEWITHSUNDEEP
javascriptreactjsnext.jsstyled-components
Mhd
Mhd

Reputation: 1088

Why is Server-side rendered styled-components with Nextjs breaking my application?

I have an error that I need help with. My Next.js app keeps breaking anytime I to access the homepage. I keep getting a cannot read data map of undefined error. The browser keeps pointing me to my _document.js file and I can't seem to find the error here because this App has been working really well up until now. I will paste some code below.

import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

my browser keeps pointing to the const page variable.

Upvotes: 0

Views: 1459

Answers (1)

Mohamed Sadat
Mohamed Sadat

Reputation: 255

Did you try do follow the with-styled-components example from next.js repo ?

I think that trying this will fix your problem:

import Document, { Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      }
    } finally {
      sheet.seal()
    }
  }

  render() {
    return (
      <html>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

NextJS with-styled-components example: with-styled-components

Upvotes: 2

Related Questions