Material-ui: Crash in Next JS Example When Injecting Head

Created on 11 Aug 2019 · 6Comments · Source: mui-org/material-ui

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When adding <Head>...</Head> to a component in pages/, there is a crash. The stack trace is:

TypeError: Cannot destructure property `styles` of 'undefined' or 'null'.
Head.render
./node_modules/next/dist/pages/_document.js:206
  203 | }
  204 | render() {
  205 |   // Problem here
> 206 |     const {
      | ^  207 |        styles,
  208 |         ampPath,
  209 |         inAmpMode,
View compiled
processChild
.../material-ui/examples/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3171:18
resolve
.../material-ui/examples/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3013:5
ReactDOMServerRenderer.render
.../material-ui/examples/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3436:22
ReactDOMServerRenderer.read
.../material-ui/examples/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3395:29
renderToString
.../material-ui/examples/nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3954:27
render
.../material-ui/examples/nextjs/node_modules/next-server/dist/server/render.js:80:16
renderPage
.../material-ui/examples/nextjs/node_modules/next-server/dist/server/render.js:237:20
ctx.renderPage
./pages/_document.js:62
  59 | const sheets = new ServerStyleSheets();
  60 | const originalRenderPage = ctx.renderPage;
  61 | 
> 62 | ctx.renderPage = () =>
     | ^  63 |   originalRenderPage({
  64 |     enhanceApp: App => props => sheets.collect(<App {...props} />),
  65 |   });

Expected Behavior 🤔

The <Head/> functionality that Next.js provides should work as expected without a crash.

Steps to Reproduce 🕹

Clone the material-ui repo.
Navigate to the nextjs example
Replace index.js in the existing nextjs example with the following:

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import {Grid, withStyles} from "@material-ui/core";
import {Head} from "next/document";

const styles = (theme) => ({
    root: {
      borderStyle: "solid",
      borderWidth: "4px",
      borderColor: "black",
    },
    item: {
      borderStyle: "solid",
      borderWidth: "4px",
      [theme.breakpoints.up("sm")]: {
        borderColor: "yellow",
      },
      borderColor: "red",
    }
});

class Index extends Component {
    static getInitialProps = async () => {
        return {pageTitle: "Custom Index Title"};
    };

    render() {
          const classes = this.props.classes;
          return (
              <Grid className={classes.root} container>
                  <Head>
                      <title>{this.props.pageTitle}</title>
                  </Head>
                  <Grid className={classes.item} item xs={6}>
                    <p>Test</p>
                  </Grid>
                  <Grid className={classes.item} item xs={6}>
                    <p>Test</p>
                  </Grid>
              </Grid>
          )
    }
}

Index.propTypes = {
    pageTitle: PropTypes.string.isRequired,
};

export default withStyles(styles)(Index);

Your Environment 🌎

This was produced

| Tech | Version |
| ----------- | ------- |
| Material-UI | 4.3.2 |
| React | 16.9.0 |
| Browser | Chrome |
| next | 9.0.3 |

Source

michael-james-holloway

👍1

Most helpful comment

@michael-james-holloway I think you may need to import the Document along with it, like import Document, { Head } from 'next/document',
or as a stand-alone import Head from 'next/Head

acostajake on 16 Aug 2019

👍3

All 6 comments

@michael-james-holloway Do you have a reproduction? You could start at https://codesandbox.io/s/nextjs-6j8u7.

oliviertassinari on 13 Aug 2019

@oliviertassinari Sorry about that -- should have attached it initially. You can find a reproduction here. The error message is slightly different, but the stack trace and core issue looks identical. Let me know if that works for you.

michael-james-holloway on 14 Aug 2019

Thanks for the reproduction. Did you find the source of the problem? Does it happen without Material-UI?

oliviertassinari on 14 Aug 2019

Not sure I know enough about either Material-UI or Next.js to pinpoint the source of the problem. That being said, I do believe it has something to do with the custom _app.js and _document.js in the examples. Without these, the <Head>...</Head> usage works fine.

Without the custom _app.js and _document.js, withStyles functionality breaks as documented here.

michael-james-holloway on 15 Aug 2019

@michael-james-holloway I think you may need to import the Document along with it, like import Document, { Head } from 'next/document',
or as a stand-alone import Head from 'next/Head

acostajake on 16 Aug 2019

👍3

@michael-james-holloway The reproduction seems to work now: https://codesandbox.io/s/nextjs-de5e0. Do you confirm that the problem was solved?

oliviertassinari on 20 Aug 2019

👀1

Was this page helpful?

0 / 5 - 0 ratings