The color provided to augmentColor(color) is invalid.

[tw1t611]

Hi,

I just reinstalled my packages and got the following error:

  159 |     if (process.env.NODE_ENV !== 'production') {
  160 |       if (!color.main) {
> 161 |         throw new Error(['Material-UI: the color provided to augmentColor(color) is invalid.', "The color object needs to have a `main` property or a `".concat(mainShade, "` property.")].join('\n'));
      | ^
  162 |       }
  163 |     }
  164 | 

  WebpackError: Material-UI: the color provided to augmentColor(color) is invalid.
  - createPalette.js:161 augmentColor
    node_modules/@material-ui/core/esm/styles/createPalette.js:161:1
  - createPalette.js:202 createPalette
    node_modules/@material-ui/core/esm/styles/createPalette.js:202:1
  - createMuiTheme.js:28 createMuiTheme
    node_modules/@material-ui/core/esm/styles/createMuiTheme.js:28:30
  - theme.js:3 Module../src/gatsby-theme-material-ui-top-layout/theme.js
    src/gatsby-theme-material-ui-top-layout/theme.js:3:30
  - wrap-with-provider.js:1 Module../node_modules/gatsby-theme-material-ui-top-layout/src/wrap-with-provider.js
    node_modules/gatsby-theme-material-ui-top-layout/src/wrap-with-provider.js:1:1
  - gatsby-ssr.js:1 Module../node_modules/gatsby-theme-material-ui-top-layout/gatsby-ssr.js
    node_modules/gatsby-theme-material-ui-top-layout/gatsby-ssr.js:1:1

It did work before the update. These are the relevant files.
src/gatsby-theme-material-ui-top-layout/theme.js:

import { colors, createMuiTheme } from "@material-ui/core"

const theme = createMuiTheme({
  palette: {
    primary: {
      main: colors.grey[900],
      fade: colors.grey[500],
      light: colors.grey[200],
    },
    secondary: {
      main: colors.lime[500],
      light: colors.lime[200],
    },
    success: colors.green[600],
  },
  drawerWidth: 240,
})

export default theme

gatsby-browser.js:

import "./src/styles/global.css"

import { AppProvider } from "./src/components/app-context"
import React from "react"

export const wrapRootElement = ({ element }) => {
  return <AppProvider>{element}</AppProvider>
}

package-lock.json

"@material-ui/core": {
- "version": "4.8.0",
+ "version": "4.8.1",

"gatsby-cli": {
- "version": "2.8.21",
+ "version": "2.8.22",

I am not using a custom gatsby-ssr.js and palette.primary.main is defined for sure.
Can't really say, what changed. It is a pretty standard setup.

[oliviertassinari]

@tw1t611 This is not related to this project. In your case, you can workaround with:

-    success: colors.green[600],
+    success: {
+      main: colors.green[600],
+    }

This could be considered a breaking change from Material-UI. Feel free to open a proper issue on the main repository.

[tw1t611]

Thank you very much. :) Seems to be no problem than.