Trying to incorporate styled-components and material-ui into nextjs with SSR using TypeScript

[joshualinog]

It all started with a dream...

I wanted to leverage the benefits of material-ui and styled-components and keep SSR benefits from nextjs intact.

Enter a random medium article...

https://medium.com/javascript-in-plain-english/ssr-with-next-js-styled-components-and-material-ui-b1e88ac11dfa

Everything seems great... until I deploy to zeit

Ouch. build errors. Public repo here:
https://github.com/jajourda/reproduce-zeit-build-error-_document.js

Zeit's response email:

Interacting with Zeit's team I got this response email:

Hello Joshua,

I am also unable to build this project locally:
ERROR in /home/paulogdm/Codes/tmp/reproduce-zeit-build-error-_document.js/pages/_document.tsx(13,23):
13:23 Parameter 'App' implicitly has an 'any' type.
11 | ctx.renderPage = () =>
12 | originalRenderPage({

13 | enhanceApp: App => props =>
| ^
14 | styledComponentSheet.collectStyles(
15 | materialUiSheets.collect(<App {...props} />),
16 | ),

Build error occurred
Error: > Build failed because of webpack errors
at build (/home/paulogdm/Codes/tmp/reproduce-zeit-build-error-_document.js/node_modules/next/dist/build/index.js:12:900)
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! /home/paulogdm/.npm/_logs/2020-03-23T12_40_31_129Z-debug.log
Please check the documentation here. After applying the changes suggested in the link, I was able to successfully build the app.

Since your question is a Next.js-specific problem, we recommend the following channels:
https://github.com/zeit/next.js/discussions
https://spectrum.chat/next-js?tab=posts
https://stackoverflow.com/questions/tagged/next.js

Best Regards,
~ Paulo De Mitri @ ZEIT

Left scratching my head in the mystery: "how did you apply the changes in the suggested link?"

[joshualinog]

Here's the file that's creating all the issues:

https://github.com/jajourda/reproduce-zeit-build-error-_document.js/blob/master/pages/_document.tsx

[joshualinog]

import React from 'react'
import NextDocument from 'next/document'
import { ServerStyleSheet as StyledComponentSheets } from 'styled-components'
import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@material-ui/styles'
export default class Document extends NextDocument {
  static async getInitialProps (ctx: any) {
    const styledComponentSheet = new StyledComponentSheets()
    const materialUiSheets = new MaterialUiServerStyleSheets()
    const originalRenderPage = ctx.renderPage
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props =>
            styledComponentSheet.collectStyles(
              materialUiSheets.collect(<App {...props} />),
            ),
        })
      const initialProps = await NextDocument.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: [
          <React.Fragment key="styles">
            {initialProps.styles}
            {materialUiSheets.getStyleElement()}
            {styledComponentSheet.getStyleElement()}
          </React.Fragment>,
        ],
      }
    } finally {
      styledComponentSheet.seal()
    }
  }
}

[joshualinog]

@paulogdm ,

Hey man, I'm trying to understand how you implemented a fix to overcome the build error in the document.tsx file based on the link you provided.

In my _document.tsx file should I replace the instance of "App" with the explicitly imported AppProps?