Error in gatsby build with gatsby-plugin-material-ui enabled

[ericsolberg]

I'm getting this error (output below) when building my application with this plugin enabled (enabled in gatsby-config.js). If I remove the plugin from gatsby-config.js, the problem goes away. My app still works just fine, so I'm not sure what this plugin actually does. But you can see in the error stack trace the error is originating in this plugin.

I'm using the latest versions of everything (I've updated all my plugins). I'm not sure where I'd even look to resolve this error further. I also don't get the error in development mode.

> gatsby build

success open and validate gatsby-configs - 0.024 s
success load plugins - 1.557 s
success onPreInit - 0.015 s
success delete html and css files from previous builds - 0.009 s
success initialize cache - 0.012 s
success copy gatsby files - 0.110 s
success onPreBootstrap - 0.008 s
success loading DatoCMS content - 4.262 s
success source and transform nodes - 4.496 s
success building schema - 0.642 s
success createPages - 0.001 s
success createPagesStatefully - 0.139 s
success onPreExtractQueries - 0.014 s
success update schema - 0.063 s
success extract queries from components - 0.388 s
success write out requires - 0.018 s
success write out redirect data - 0.002 s
success Build manifest and related icons - 0.310 s
success onPostBootstrap - 0.326 s
⠀
info bootstrap finished - 11.224 s
⠀
success run static queries - 0.093 s — 5/5 57.03 queries/second
success Building production JavaScript and CSS bundles - 85.968 s
success Rewriting compilation hashes - 0.005 s
success run page queries - 0.035 s — 3/3 122.73 queries/second
⠏ Building static HTML for pages

 ERROR #95313 

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

  102 |       )
  103 |     } else {
> 104 |       result = new CssSyntaxError(
      |                ^
  105 |         message, line, column, this.css, this.file, opts.plugin)
  106 |     }
  107 | 

  WebpackError: CssSyntaxError: <css input>:2022:7: Unknown word

  - input.es6:104 Input.error
    input.es6:104:16

  - parser.es6:481 Parser.unknownWord
    parser.es6:481:11

  - parser.es6:198 Parser.decl
    parser.es6:198:11

  - parser.es6:108 Parser.other
    parser.es6:108:13

  - parser.es6:56 Parser.parse
    parser.es6:56:11

  - parse.es6:8 parse
    parse.es6:8:5

  - lazy-result.es6:41 new LazyResult
    lazy-result.es6:41:16

  - processor.es6:109 Processor.<anonymous>
    processor.es6:109:12

  - gatsby-ssr.js:57 Object.onRenderBody
    node_modules/gatsby-plugin-material-ui/gatsby-ssr.js:57:47

⠴ Building static HTML for pages
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bkpt2@0.1.0 build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the bkpt2@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/i809433/.npm/_logs/2019-06-29T01_51_54_062Z-debug.log```

[hupe1980]

Could you provide a reproduction?

[ericsolberg]

I can try - this is a fairly large/complex app so getting a minimum reproduction may be hard - but I'll see. Could you comment on what the difference is between building with this plugin, and building without it? Since the app is working without it, I'm not sure what actually changes... That's purely for my education if you don't mind!

[oliviertassinari]

@ericsolberg This plugin solves the FOUC issue.

[ericsolberg]

Ah- I was just wondering if there was a way to prevent that. So its def worth figuring it out. I'll see if I can get a minimum repro (and more often than not, that process will lead me to figure out what I did wrong...)

[ericsolberg]

So I've just about got this narrowed down... but I can already see that it seems to be coming from the CardBody component in the Material Kit Pro React component ... still eliminating everything else, but posting this here just in case this is a combination I shouldn't be using ... I've got @material-ui/core v 4.1.3, gatsby-plugin-material-ui v 2.1.2, and Material Kit Pro React v 1.7.0...

[ericsolberg]

The error is being caused by line 39 in cardBodyStyle.jsx in Material Kit Pro React. The selector 'h1, h2, h3' below... I'm not sure if this is valid css-in-js ... will have to look that up.

  cardBodyColor: {
    borderRadius: '6px',
    '&': {
      'h1, h2, h3': { // <-- this is the problem... is it valid?
        '& small': {
          color: 'rgba(' + hexToRgb(whiteColor) + ', 0.8)'
        }
      }
    }
  }

[ericsolberg]

OK so sorry to bother you - this bug isn't related to the gatsby-plugin-material-ui plugin. It would certainly be helpful the error generated the source of the offending CSS, or at least the CSS name that it didn't recognize. I'm also not sure why this doesn't show up in development.

I think the 'h1, h2, h3' selector above is just missing the & ... ie '& h1, h2, h3'. As far as I know, it's not a valid sub-selector without that.

@oliviertassinari I'm not sure if you are connected with Creative Tim, but it looks like a small typo in the Material Kit Pro React, cardBodyStyle.jsx line 39. I can go to the CT website and let them know.

Thanks for your help on this.

[oliviertassinari]

@ericsolberg It's not valid. I think that you are right, the following should be correct:

"& h1, & h2, & h3": {

[oliviertassinari]

Maybe there is a way to get a better failing message, with more helpful debug information when the generated CSS is invalid?

[ericsolberg]

And the plugin did eliminate the FOUC. Excellent! Thank you.

[oliviertassinari]

@ericsolberg Did you report the issue to Creative-Tim?

[hupe1980]

Maybe there is a way to get a better failing message, with more helpful debug information when the generated CSS is invalid?

If we handle this in the plugin, the error message only appears in the build step. Can the error possibly be thrown earlier?

sheets.toString() returned the following ... .jss1 { h1, h2, h3: [object Object]; }

In dev mode, the invalid css was injected without a warning

[ericsolberg]

@oliviertassinari Just did. Thanks.

[hupe1980]

Since the issue has nothing to do with the plugin, I close it