Cyan color undefined

[sarahannnicholson]

Running into issues with gatsby develop today. I believe it has to do with this gatsby-plugin-material-ui package or one of its dependencies.

Here is the error I get when trying to develop:

success Build manifest and related icons - 0.207s
success onPostBootstrap - 0.211s
info bootstrap finished - 190.030s
success onPreExtractQueries - 0.001s
success extract queries from components - 4.572s
success write out requires - 0.278s
success run static queries - 5.575s - 5/5 0.90/s
success run page queries - 0.146s - 3/3 20.49/s

 ERROR

There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html TypeError: Cannot read property 'cyan'
 of undefined


  13 |
  14 | var HIGHLIGHT_THEME = {
> 15 |   brackets: _nanocolors.default.cyan,
     | ^
  16 |   'at-word': _nanocolors.default.cyan,
  17 |   comment: _nanocolors.default.gray,
  18 |   string: _nanocolors.default.green,


  WebpackError: TypeError: Cannot read property 'cyan' of undefined

  - terminal-highlight.js:15
    node_modules/postcss/lib/terminal-highlight.js:15:1

  - css-syntax-error.js:8
    node_modules/postcss/lib/css-syntax-error.js:8:49

  - node.js:6
    node_modules/postcss/lib/node.js:6:46

  - declaration.js:6
    node_modules/postcss/lib/declaration.js:6:36

  - postcss.js:6
    node_modules/postcss/lib/postcss.js:6:43

  - autoprefixer.js:8
    node_modules/gatsby-plugin-material-ui/autoprefixer.js:8:39

  - gatsby-ssr.js:18
    node_modules/gatsby-plugin-material-ui/gatsby-ssr.js:18:44


not finished Building development bundle - 13.327s

Some information about my versioning and systems I rangatsby info --clipboard.
The output was:

System:
    OS: Linux 4.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: [hidden]
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  npmPackages:
    gatsby: ^2.27.4 => 2.32.13
    gatsby-cli: ^2.15.0 => 2.19.3
    gatsby-image: ^2.6.0 => 2.11.0
    gatsby-plugin-feed: ^2.8.0 => 2.13.1
    gatsby-plugin-manifest: ^2.7.0 => 2.12.1
    gatsby-plugin-material-ui: ^2.1.10 => 2.1.10
    gatsby-plugin-playground: ^1.0.6 => 1.0.6
    gatsby-plugin-postcss: ^3.2.0 => 3.7.0
    gatsby-plugin-react-helmet: ^3.5.0 => 3.10.0
    gatsby-plugin-robots-txt: ^1.5.3 => 1.6.10
    gatsby-plugin-sass: ^2.7.0 => 2.8.0
    gatsby-plugin-sharp: ^2.9.1 => 2.14.4
    gatsby-plugin-sitemap: ^2.7.0 => 2.12.0
    gatsby-source-filesystem: ^2.6.1 => 2.11.1
    gatsby-source-graphql: ^2.9.0 => 2.14.0
    gatsby-source-wordpress: ^3.6.1 => 3.11.0
    gatsby-transformer-sharp: ^2.7.0 => 2.12.1
  npmGlobalPackages:
    gatsby-cli: 3.14.0

MUI versions

        "@material-ui/core": "4.11.4",
        "@material-ui/icons": "4.11.2",
        "@material-ui/lab": "4.0.0-alpha.58"

[sarahannnicholson]

If anyone runs into this, npm i gatsby-plugin-material-ui@latest was my only change and it was fixed. Continued using the same versions above for Gatsby etc.

[sarahannnicholson]

To add to this ticket, the solution I posted only worked for one of our projects. Other projects gave the following npm error:
node_modules/gatsby gatsby@^2.27.4 from the root project could not resolve dependency: peer gatsby@^3.0.0 from [email protected]

We have decided to update Gatsby to v3 as it was long overdue.

Re-opening to see if there is a better solution than a massive upgrade.