Material-ui: Issue while using Next.js with Material-ui, project based on example from /examples

[Kizbo]

I'm trying to setup a simple app using Nextjs + MaterialUI Combination, following example from examples folder, but when I'm trying to use any of the Material components, i'm getting this error:

This error is from Button, but it happens with all of the comps. Here is my package.json

{
  "name": "frontend",
  "version": "2.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "next build",
    "start": "node server.js CHOKIDAR_USEPOLLING=true "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.0.0",
    "@material-ui/icons": "^4.0.0",
    "@material-ui/styles": "^4.0.0",
    "autoprefixer": "9.4.7",
    "axios": "^0.18.0",
    "chokidar-cli": "^1.2.2",
    "clsx": "^1.0.4",
    "express": "^4.16.4",
    "glob": "^7.1.3",
    "isomorphic-unfetch": "^3.0.0",
    "next": "7.0.2",
    "postcss-easy-import": "^3.0.0",
    "react": "^16.8.6",
    "wpapi": "^1.2.1"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "babel-plugin-module-resolver": "^3.1.3",
    "babel-plugin-wrap-in-js": "^1.1.0",
    "eslint": "^5.13.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "node-sass": "^4.11.0",
    "normalize.css": "^8.0.1",
    "postcss-loader": "^3.0.0",
    "raw-loader": "^1.0.0",
    "react-dom": "^16.8.6",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.0"
  }
}

My next.config.js

const path = require('path');
const glob = require('glob');

module.exports = {
  webpack: config => {
    config.module.rules.push(
      {
        test: /\.(css|scss)/,
        loader: 'emit-file-loader',
        options: {
          name: 'dist/[path][name].[ext]',
        },
      },
      {
        test: /\.css$/,
        use: ['babel-loader', 'raw-loader', 'postcss-loader'],
      },
      {
        test: /\.s(a|c)ss$/,
        use: [
          'babel-loader',
          'raw-loader',
          'postcss-loader',
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['styles', 'node_modules']
                .map(d => path.join(__dirname, d))
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), []),
            },
          },
        ],
      },
    );


    return config;
  },
  webpackDevMiddleware: config => {
    config.watchOptions = {
      aggregateTimeout: 300,
      poll: 1000,
      ignored: [/(^|[\/\\])\../, /node_modules/]
    }
    return config
  }
};

_app.js and _document.js is copy-pasted from example with next. I cannot find this bug anywhere, perhaps it is some stupid mistake, but i cannot find it.

[oliviertassinari]

@Kizbo Is our example working?

[Kizbo]

It is working with no errors in my environment. I'm not sure what is wrong with my repo then, only differences are next.config.js file and custom server starter:

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    /*server.get('/post/:slug', (req, res) => {
      const actualPage = '/post';
      const queryParams = { slug: req.params.slug, apiRoute: 'post' };
      app.render(req, res, actualPage, queryParams);
    });*/

    server.get("/", (req, res) => {
      app.render(req, res, "/index");
    })

    server.get('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(3000, err => {
      if (err) throw err;
      console.log('> Ready on http://localhost:3000');
    });
  })
  .catch(ex => {
    console.error(ex.stack);
    process.exit(1);
  });

[oliviertassinari]

Do you have more detail on the error?

[Kizbo]

https://github.com/Kizbo/next-material-error

I made it into repository, if you have time, take a look. I'm not really sure what more i can provide you with.

[oliviertassinari]

Upgrading Next.js from v7.0.2 to v8.1.0 solves the problem.

next@latest:
  version "8.1.0"

I can't explain why.