Material-ui: Example "nextjs-with-typescript" not working with NextJS AMP support

[ghost]

Issue

Using the example https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript and activating nextjs's AMP support gives the following error:

```Cannot read property '__html' of undefined

TypeError: Cannot read property '__html' of undefined
at _react.default.createElement._react.default.createElement._react.default.createElement.dangerouslySetInnerHTML.__html.curStyles.map.style (C:\Daten\Coding\next amp\nextjs.next\server\static\developmentpages_document.js:1035:76)
at Array.map ()
at Head.render (C:\Daten\Coding\next amp\nextjs.next\server\static\developmentpages_document.js:1035:27)
at processChild (C:\Daten\Coding\next amp\nextjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3316:18)
at resolve (C:\Daten\Coding\next amp\nextjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3147:5)
at ReactDOMServerRenderer.render (C:\Daten\Coding\next amp\nextjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3631:22)
at ReactDOMServerRenderer.read (C:\Daten\Coding\next amp\nextjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:3565:29)
at Object.renderToStaticMarkup (C:\Daten\Coding\next amp\nextjs\node_modules\react-dom\cjs\react-dom-server.node.development.js:4312:27)
at renderDocument (C:\Daten\Coding\next amp\nextjs\node_modules\next\dist\next-server\server\render.js:90:18)
at Object.renderToHTML (C:\Daten\Coding\next amp\nextjs\node_modules\next\dist\next-server\server\render.js:319:16)
```

Steps to reproduce

1. Clone this example: https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript
2. Install with npm install
3. Add the following as last line in /pages/about.tsx: export const config = { amp: 'hybrid` };
4. Run npm run dev
5. Navigate to http://localhost:3000/about?amp=1

The NextJS example for Nextjs + TypeScript + Styled Components is working just fine with that. So I don't see why Material UI shouldn't work.

[oliviertassinari]

The difference between styled-components and us seems to be https://github.com/mui-org/material-ui/blob/59231d47ac25c4551d55a7d852c015db46379046/packages/material-ui-styles/src/ServerStyleSheets/ServerStyleSheets.js#L42

Could it be an issue with Next.js too?

[ghost]

Good question but I can only guess and I think it's rather a problem with how this MUI example is set up? I just started getting into SSR so I can't really tell.

[dmdb]

Facing same issue with https://github.com/mui-org/material-ui/tree/master/examples/nextjs integration on AMP pages.

[ghost]

No solution?

[oliviertassinari]

@fbnklmnvds If you are looking to make a contribution, it's up for grab: https://github.com/zeit/next.js/issues/7856 / https://github.com/zeit/next.js/issues/9041 / https://github.com/zeit/next.js/issues/9087.

[oliviertassinari]

@fbnklmnvds What do you think of this diff? Do you want to submit a pull request? :)

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 7a7213b79..da8b1fe47 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -143,12 +143,14 @@ MyDocument.getInitialProps = async ctx => {
     ...initialProps,
     canonical: pathnameToLanguage(ctx.req.url).canonical,
     userLanguage: ctx.query.userLanguage || 'en',
-    styles: (
+    styles: [
+      ...initialProps.styles,
       <style
         id="jss-server-side"
+        key="jss-server-side"
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: css }}
-      />
-    ),
+      />,
+    ],
   };
 };
diff --git a/examples/nextjs-with-typescript/pages/_document.tsx b/examples/nextjs-with-typescript/pages/_document.tsx
index ddb145d21..563d30c5e 100644
--- a/examples/nextjs-with-typescript/pages/_document.tsx
+++ b/examples/nextjs-with-typescript/pages/_document.tsx
@@ -3,7 +3,7 @@ import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/styles';
 import theme from '../src/theme';

-class MyDocument extends Document {
+export default class MyDocument extends Document {
   render() {
     return (
       <html lang="en">
@@ -66,13 +66,6 @@ MyDocument.getInitialProps = async ctx => {
   return {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
-    styles: [
-      <React.Fragment key="styles">
-        {initialProps.styles}
-        {sheets.getStyleElement()}
-      </React.Fragment>,
-    ],
+    styles: [...initialProps.styles, sheets.getStyleElement()],
   };
 };
-
-export default MyDocument;
diff --git a/examples/nextjs/pages/_document.js b/examples/nextjs/pages/_document.js
index ddb145d21..563d30c5e 100644
--- a/examples/nextjs/pages/_document.js
+++ b/examples/nextjs/pages/_document.js
@@ -3,7 +3,7 @@ import Document, { Head, Main, NextScript } from 'next/document';
 import { ServerStyleSheets } from '@material-ui/styles';
 import theme from '../src/theme';

-class MyDocument extends Document {
+export default class MyDocument extends Document {
   render() {
     return (
       <html lang="en">
@@ -66,13 +66,6 @@ MyDocument.getInitialProps = async ctx => {
   return {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
-    styles: [
-      <React.Fragment key="styles">
-        {initialProps.styles}
-        {sheets.getStyleElement()}
-      </React.Fragment>,
-    ],
+    styles: [...initialProps.styles, sheets.getStyleElement()],
   };
 };
-
-export default MyDocument;

[ghost]

@oliviertassinari I did. Also, thanks for the spoon feeding ;) It was my very first pull request and I hope I didn't miss anything important in the process.

[oliviertassinari]

Thank you ✌️

[tonytino]

@oliviertassinari Thanks for all your hard work on this project (same to everyone else on your team). This has to be one of my favorite open-source projects. I've learned a lot just by being a consumer of this project (I read the code all the time to understand things further or when looking for guidance on my own code implementation), which is a community service in itself. More importantly though, I've never seen such amazing community support as I have with your work (e.g. your excellent, friendly guidance provided above). So thank you.

_P.S. Sorry for an unrelated comment here, would have sent directly to you if GH had such a feature; this thread simply inspired the comment._

[oliviertassinari]

@tonytino thank you for the feedback. We do our best with the resources available. Unfortunately, we cannot give a positive outcome to all the topic, sometimes, we have to make hard tradeoffs, saying no.