Gatsby: MDC React will run in develop but won't build

[jaydanurwin]

Description

I am trying to use the official MDC React components and set up a project using default gatsby starter following their step in the readme. The part that makes me think this is a gatsby build proccess issue is that:

1. It works while using gatsby develop locally
2. The build works great using create-react-app as they explain in the readme for MDC React components
3. It only breaks while using gatsby build

I've tried everything from deleting node modules, public, and cache to start fresh to using some custom sass loaders.

I'd like to use Gatsby and MDC on my next project and maybe even make an official Gatsby starter while I'm at it! If I could get some help here I'd really appreciate it!

Steps to reproduce

feel free to clone my repo for the basic MDC React setup w/ Gatsby

git clone https://github.com/jaydanurwin/gatsby-mdc-test.git

I added the .env variables for the SASS_PATH and I'm just using the Button Component in the index.js file to test it

Expected result

Both build and develop should compile successfully

Actual result

gatsby develop compiles successfully and the button is responsive

gatsby build fails after this step in the build process

success Building production JavaScript and CSS bundles — 6.620 s
error Cannot read property 'path' of undefined


  TypeError: Cannot read property 'path' of undefined

  - build.js:68 buildHTML.catch.err
    [gatsby-starter-default]/[gatsby]/dist/commands/build.js:68:72

  - util.js:16 tryCatcher
    [lib]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:690 Promise._settlePromises
    [lib]/[gatsby-cli]/[bluebird]/js/release/promise.js:690:18

  - async.js:138 _drainQueueStep
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:138:12

  - async.js:131 _drainQueue
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:131:9

  - async.js:147 Async._drainQueues
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:147:5

  - async.js:17 Immediate.Async.drainQueues [as _onImmediate]
    [lib]/[gatsby-cli]/[bluebird]/js/release/async.js:17:14

Environment

 System:
    OS: macOS 10.14.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.14.2 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 72.0.3626.81
    Safari: 12.0.2
  npmPackages:
    gatsby: ^2.0.105 => 2.0.105
    gatsby-image: ^2.0.20 => 2.0.25
    gatsby-plugin-manifest: ^2.0.15 => 2.0.15
    gatsby-plugin-offline: ^2.0.22 => 2.0.22
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.5
    gatsby-plugin-sass: ^2.0.8 => 2.0.8
    gatsby-plugin-sharp: ^2.0.19 => 2.0.19
    gatsby-source-filesystem: ^2.0.8 => 2.0.12
    gatsby-transformer-sharp: ^2.1.13 => 2.1.13
  npmGlobalPackages:
    gatsby-cli: 2.4.8

_First Issue report for me so let me know how I did._

[sidharthachatterjee]

Thank you for opening this @jaydanurwin (You did great!)

It looks like material-components-web-react has a bug where Button doesn't work with SSR. It works with both Create React App and gatsby develop because neither of these perform any server side rendering.

This is why gatsby build is failing

I've gone ahead and sent you a PR (https://github.com/jaydanurwin/gatsby-mdc-test/pull/1) fixing the SASS import stuff (if you look at a built CSS, the styles from MDC are imported fine)

I've also gone ahead and created a test repository reproducing the bug (https://github.com/sidharthachatterjee/mdc-ssr-test) and opened an issue there — https://github.com/material-components/material-components-web-react/issues/654

Closing this for the moment since this is unrelated to Gatsby but please follow along in the issue I linked to above and of course feel free to comment or reopen if there is anything else I can help with!

[jaydanurwin]

Thank you for the help @sidharthachatterjee I really appreciate it! I figured it must have had something specific to do with Gatsby's build process and not React. I'll be sure to watch the issue over on the MDC React repo.

Thank you again hopefully they can get it squared away soon! 👍