NextJS Build breaking @material-ui/core & react-bootstrap imports

Question

So I've read around and I can see this is a common thing but sadly all the solutions I could find didn't work out for me.

When in npm run dev mode the project is fine, all my imports work.

import { Typography } from "@material-ui/core";
import Card from 'react-bootstrap/Card'

example of how I import in a page, but the second I npm run build and go to the page, it seems these imports fail and I just get no CSS off them.

This is my next.config.js file

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

I would assume I need to give it materialUI & react-bootstrap? my attempts on that have failed.

Any help on this would be greatly appreciated, not sure why it wouldn't build.

Here is my package.json

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "prod": "next export"
  },
  "dependencies": {
    "@material-ui/core": "^4.8.2",
    "@material-ui/icons": "^4.5.1",
    "@zeit/next-css": "^1.0.1",
    "bootstrap": "^4.4.1",
    "next": "9.1.6",
    "next-compose-plugins": "^2.2.0",
    "nextjs-sitemap-generator": "^0.4.2",
    "react": "16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "16.12.0",
    "styled-components": "^4.4.1"
  }
}

can you push a minimal part of your app (that can reproduce the issue described) to github and send a link so I could reproduce it? — rotimi-best
– rotimi-best, Commented Jan 2, 2020 at 17:55
github.com/Cobwebster/SuffolkDaily Is there any file I missed out? Pretty new to next.js so not sure on what the important files are. — Cobwebster
– Cobwebster, Commented Jan 2, 2020 at 18:08
with the code you provided, I made some little import fixes and ran npm run build and npm start. And everything runs well on http://localhost:3000. Here is a pull request I made showing you what I changed github.com/Cobwebster/SuffolkDaily/pull/1 — rotimi-best
– rotimi-best, Commented Jan 2, 2020 at 18:28
I made a video showing you how I looks locally for me. I hope it helps. youtu.be/_HwgoXMxQXY. — rotimi-best
– rotimi-best, Commented Jan 2, 2020 at 18:39

Trect · Accepted Answer · 2020-05-14 20:43:31Z

It is a common problem faced for material-ui from version 4.3+. It can be overcome by preloading the CSS using _document.js.

It has been extensively described in this link. For the sake of brevity I am adding it here. Add the following code in _document.js and the CSS should look reasonably fine.

import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets } from '@material-ui/styles'
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles'

const theme = responsiveFontSizes(createMuiTheme())

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
          />
          <style jsx global>
            {`
              html,
              body {
                height: 100%;
                width: 100%;
              }
              *,
              *:after,
              *:before {
                box-sizing: border-box;
              }
              body {
                font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
                font-size: 1rem;
                margin: 0;
              }
            `}
          </style>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

MyDocument.getInitialProps = async ctx => {
  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets()
  const originalRenderPage = ctx.renderPage

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    })

  const initialProps = await Document.getInitialProps(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>
    ]
  }
}

export default MyDocument

Collectives™ on Stack Overflow

NextJS Build breaking @material-ui/core & react-bootstrap imports

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related