Issue with Static Building Dynamic Pages using Styled Components (maybe React portals)

[danboyle8637]

Bug report

I am trying to build my site statically, but not using next-export. I have four dynamic pages that query data from Sanity.

I have followed the Sanity example and I have console logged my data from getStaticPaths and getStaticProps during the build and all of the data shows up in the console...

...AFTER... Next trying to do Automatic Optimization of Pages.

When Next is doing Automatic Optimization of Pages, all of my dynamic pages's props are undefined.

I have used both getStaticPaths and getStaticProps and in development it works and when consoling data to the terminal... the data is there.

Yes my dynamic page props remain undefined.

I read in the documentation if you use getInitialProps in _document.tsx you have to make sure ctx.req is defined. Yet I also found an unanswered issue where Tim said that this does not matter.

Styled Components requires a custom _document.tsx with getInitialProps.

I think this is the problem.

Or maybe because my static site is using Portals but I am not using @jesstelford/react-portal-universal.

But I don't want my portals indexed so I'm not sure if that matters.

From everything I've looked into, their seems to be an issue with styled components and statically building sites.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Example Component My Blog Post Dynamic Component

// import statements... left out to save room.

const BlogPost: React.FC<BlogPostData> = ({
  blogPostData,
  banner1,
  banner2,
}) => {
  const {
    tinyFeatureImage,
    mainFeatureImage,
    altTag,
    titleTag,
    title,
    teaserCopy,
    // tags,
    // authorName,
    postBody,
  } = blogPostData

  return (
    <>
      <Seo title={title} description={teaserCopy} />
      <BlogPostHeader
        tinyFeatureImage={tinyFeatureImage}
        mainFeatureImage={mainFeatureImage}
        altTag={altTag}
        titleTag={titleTag}
        headline={title}
      />
      <BlogPostContent postBody={postBody} />
      <CtaDoubleBannerSection
        banner1={banner1}
        banner2={banner2}
        isNutrition1={true}
        isNutrition2={true}
      />
    </>
  )
}

export const getStaticPaths: GetStaticPaths = async () => {
  const data: BlogPostSlugs = await client.fetch(slugQuery)

  const slugPaths = data?.blogPostSlugs.map((path) => ({
    params: {
      slug: path.slug,
    },
  }))

  return {
    paths: slugPaths || [],
    fallback: true,
  }
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const slug = ctx.params?.slug
  const data: BlogPostData = await client.fetch(blogQuery, {
    slug,
  })
  const bannerCardsData: BannerCardsData = await client.fetch(bannerCardsQuery)

  const fwwNutritionCoachingBanner = bannerCardsData?.bannerCardsData.filter(
    (card) => card.callToActionId === 'privateNutritionCoaching'
  )

  const fwwLiveBanner = bannerCardsData?.bannerCardsData.filter(
    (card) => card.callToActionId === 'fwwLive'
  )

  return {
    props: {
      blogPostData: data?.blogPostData,
      banner1: fwwLiveBanner[0],
      banner2: fwwNutritionCoachingBanner[0],
    },
  }
}

export default BlogPost

My Custom Document File

Notice where I placed my portal according to the example in Next's repo. The example that does NOT use SSR

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

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    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>
        <Head />
        <body>
          <Main />
          <div id="portal" />
          <NextScript />
        </body>
      </html>
    )
  }
}

The Errors I Am Seeing at Build Time Both Locally And On Vercel

[email protected] build /Users/danboyle/Documents/NeverBackDown/fww-marketing-site
> next build

info  - Loaded env from .env.production
> Using external babel configuration
> Location: "/Users/danboyle/Documents/NeverBackDown/fww-marketing-site/.babelrc"
Creating an optimized production build

Compiled successfully.

Automatically optimizing pages ...
Error occurred prerendering page "/post/[slug]". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot destructure property `tinyFeatureImage` of 'undefined' or 'null'.

Error occurred prerendering page "/legal/[slug]". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot destructure property `seoTitle` of 'undefined' or 'null'.
Automatically optimizing pages .
Error occurred prerendering page "/nutrition-programs/[slug]". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot destructure property `tinyProgramHeaderImage` of 'undefined' or 'null'.
Automatically optimizing pages ...
Error occurred prerendering page "/workout-programs/[slug]". Read more: https://err.sh/next.js/prerender-error
TypeError: Cannot destructure property `tinyProgramHeaderImage` of 'undefined' or 'null'.
> Build error occurred
Error: Export encountered errors
    at _default (/Users/danboyle/Documents/NeverBackDown/fww-marketing-site/node_modules/next/dist/export/index.js:20:1164)
    at processTicksAndRejections (internal/process/task_queues.js:85:5)
    at async build (/Users/danboyle/Documents/NeverBackDown/fww-marketing-site/node_modules/next/dist/build/index.js:36:218)
Automatically optimizing pages .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/danboyle/.npm/_logs/2020-06-02T22_48_25_500Z-debug.log

Expected behavior

I expect the dynamic pages to be built successfully since they are getting the necessary data.

When things build in development, everything works fine.

I have double checked to make sure all slugs I use match up with what is in getStaticPaths and what is actually used in the site.

System information

• OS: macOS
• Version of Next.js: 9.4.2
• Version of Node.js: 12.8.0

Additional context

I think that covers everything and I will try to rebuild a portion of my site in CodeSandBox if needed.