Import References to material-ui node modules fails

[paulwhitaker]

If you are using the latest version of Material UI then you need to update your import statements that are referencing the Material UI modules.

I'm more of a hobby developer, so if there's a better way to manage this, or if I'm missing something simple and this isn't really an issue then please let me know. Thanks

Here is my Default Styles Definition

import createMuiTheme from '@material-ui/core/styles/createMuiTheme'

import indigo from '@material-ui/core/colors/indigo'
import purple from '@material-ui/core/colors/purple'
import green from '@material-ui/core/colors/green'
import red from '@material-ui/core/colors/red'

export default createMuiTheme({
  palette: {
    palette: {
      primary: {
        light: '#4f5b62',
        main: '#263238',
        dark: '#000a12',
        contrastText: '#fff',
      },
      secondary: {
        light: '#eeeeee',
        main: '#bcbcbc',
        dark: '#8c8c8c',
        contrastText: '#000',
      },
      error: red,
    },    
  },
})

This also needs to be done in the gatsby-ssr.js file. Here is one specific example

// File : /node_modules/gatsby-plugin-material-ui/gatsby-ssr.js
// lines 17, 18, 19
// current file
var _styles = require('material-ui/styles');

var _createGenerateClassName = require('material-ui/styles/createGenerateClassName');

// Update that to
var _styles = require('@material-ui/core/styles');

var _createGenerateClassName = require('@material-ui/core/styles/createGenerateClassName');

gatsby-ssr.js override file in your project root This is only necessary if need to merge gatsby-ssr files when two or more plugins implement the replaceRenderer function.

I happen to be using styled components and Material ui. This creates a conflict where both plugins are using the replaceRenderer function. Here's my gatsby-ssr.js file that merges the necessary code from each of the component gatsby-ssr.js files. This resolves the problems caused on the production build.

This might be worth mentioning in the main README file or on gatsbyjs.org

'use strict';

var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _server = require('react-dom/server');
var _reactJss = require('react-jss');
var _jss = require('jss');
var _jssPresetDefault = require('jss-preset-default');
var _jssPresetDefault2 = _interopRequireDefault(_jssPresetDefault);
var _styles = require('@material-ui/core/styles');
var _createGenerateClassName = require('@material-ui/core/styles/createGenerateClassName');
var _createGenerateClassName2 = _interopRequireDefault(_createGenerateClassName);
var _theme = require('./node_modules/gatsby-plugin-material-ui/.cache/theme');
var _theme2 = _interopRequireDefault(_theme);

//from styled components
var _styledComponents = require("styled-components");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// eslint-disable-line

exports.replaceRenderer = function (_ref) {

 

  var bodyComponent = _ref.bodyComponent,
      replaceBodyHTMLString = _ref.replaceBodyHTMLString,
      setHeadComponents = _ref.setHeadComponents;

  var sheets = new _reactJss.SheetsRegistry();
  var jss = (0, _jss.create)((0, _jssPresetDefault2.default)());
  var sheet = new _styledComponents.ServerStyleSheet();  // From Styled Components

  jss.options.createGenerateClassName = _createGenerateClassName2.default;

  var bodyHTML = (0, _server.renderToString)(_react2.default.createElement(
    
    _reactJss.JssProvider,
    { registry: sheets, jss: jss },
    _react2.default.createElement(      
      _styles.MuiThemeProvider,
      { theme: _theme2.default, sheetsManager: new Map() },
      bodyComponent
    )
  ));

  replaceBodyHTMLString(bodyHTML);
  setHeadComponents([
    sheet.getStyleElement(),
    _react2.default.createElement('style', {type: 'text/css',id: 'server-side-jss',key: 'server-side-jss',dangerouslySetInnerHTML: { __html: sheets.toString() }}) 
  ]);
};