Material Design Drawer causing Build error #10108

adrianwix · 2018-11-23T23:19:25Z

Description

Can not build with Material Design React components https://github.com/material-components/material-components-web-react/tree/master/packages/drawer

Steps to reproduce

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue much easier to diagnose (seriously).

Expected result

What should happen?

Actual result

WebpackError: ReferenceError: Element is not defined

index.js:352 Object._
[lib]/[@Material]/react-drawer/dist/index.js:352:305
index.js:148 webpack_require
[lib]/[@Material]/react-drawer/dist/index.js:148:1
index.js:761 Object._
[lib]/[@Material]/react-drawer/dist/index.js:761:483
index.js:148 webpack_require
[lib]/[@Material]/react-drawer/dist/index.js:148:1
index.js:325 Object._
[lib]/[@Material]/react-drawer/dist/index.js:325:576
index.js:148 webpack_require
[lib]/[@Material]/react-drawer/dist/index.js:148:1
index.js:258 Object._
[lib]/[@Material]/react-drawer/dist/index.js:258:1439
index.js:148 webpack_require
[lib]/[@Material]/react-drawer/dist/index.js:148:1
index.js:157 0
[lib]/[@Material]/react-drawer/dist/index.js:157:1
index.js:157
[lib]/[@Material]/react-drawer/dist/index.js:157:72
index.js:139 webpackUniversalModuleDefinition
[lib]/[@Material]/react-drawer/dist/index.js:139:132
index.js:142 Object.
[lib]/[@Material]/react-drawer/dist/index.js:142:275
index.js:773 Object._typeof
[lib]/[@Material]/react-drawer/dist/index.js:773:29
index.js:30 webpack_require
[lib]/[@Material]/react-drawer/dist/index.js:30:1
index.js:107 Object._typeof
[lib]/[@Material]/react-drawer/dist/index.js:107:1171
index.js:30 webpack_require
[lib]/[@Material]/react-drawer/dist/index.js:30:1

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-netlify-cms@1.1.3 build: npm run clean && gatsby build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-netlify-cms@1.1.3 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! C:\Users\adrian\AppData\Roaming\npm-cache_logs\2018-11-23T23_04_36_853Z-debug.log

Environment

Run gatsby info --clipboard in your project directory and paste the output here. Not working? You may need to update your global gatsby-cli - npm install -g gatsby-cli System:
OS: Windows 8.1
CPU: x64 Intel(R) Core(TM) i7-4510U CPU @ 2.00GHz
Binaries:
Yarn: 1.10.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
npmPackages:
gatsby: ^2.0.0 => 2.0.55
gatsby-plugin-netlify: ^2.0.0 => 2.0.5
gatsby-plugin-netlify-cms: ^3.0.0 => 3.0.7
gatsby-plugin-react-helmet: ^3.0.0 => 3.0.2
gatsby-plugin-sass: ^2.0.1 => 2.0.4
gatsby-plugin-sharp: ^2.0.5 => 2.0.13
gatsby-remark-images: ^2.0.1 => 2.0.6
gatsby-source-filesystem: ^2.0.1 => 2.0.8
gatsby-transformer-remark: ^2.1.1 => 2.1.12
gatsby-transformer-sharp: ^2.1.1 => 2.1.8

error The system cannot find the path specified.

Error: The system cannot find the path specified.

envinfo.js:1 Function.e.exports.sync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778
envinfo.js:1 Object.copySync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976
envinfo.js:1 Object.t.writeSync.e [as writeSync]
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499
envinfo.js:1
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274
envinfo.js:1 Promise.all.then.e
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289
util.js:16 tryCatcher
[npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23
promise.js:512 Promise._settlePromiseFromHandler
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31
promise.js:569 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18
promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10
promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18
promise.js:638 Promise._fulfill
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18
promise_array.js:126 PromiseArray._resolve
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19
promise_array.js:144 PromiseArray._promiseFulfilled
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14
promise.js:574 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26
promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10
promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

error UNHANDLED REJECTION

Error: The system cannot find the path specified.

envinfo.js:1 Function.e.exports.sync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778
envinfo.js:1 Object.copySync
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976
envinfo.js:1 Object.t.writeSync.e [as writeSync]
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499
envinfo.js:1
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274
envinfo.js:1 Promise.all.then.e
[npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289
util.js:16 tryCatcher
[npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23
promise.js:512 Promise._settlePromiseFromHandler
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31
promise.js:569 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18
promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10
promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18
promise.js:638 Promise._fulfill
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18
promise_array.js:126 PromiseArray._resolve
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19
promise_array.js:144 PromiseArray._promiseFulfilled
[npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14
promise.js:574 Promise._settlePromise
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26
promise.js:614 Promise._settlePromise0
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10
promise.js:694 Promise._settlePromises
[npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

The text was updated successfully, but these errors were encountered:

jonniebigodes · 2018-11-25T22:14:45Z

Did you used a starter? If so wich one?
Also if the work you're doing is not private or otherwise protected, a repository url so that the issue can be looked at in more detail if you don't mind.

jonniebigodes · 2018-11-29T19:28:59Z

@adrianwix based on the information at my disposal it seems that you have used the this material implementation right?
So with that in mind i created a fresh gatsby site using the default starter, not the one that it seems you're using by reading the error log, which is the gatsby-starter-netlify-cms.
Proceeded to add the drawer component to my dependencies as per docs here and created a test component to check your issue.
The code i used for the test component is the following

import React, { Component } from 'react'
import '@material/drawer/dist/mdc.drawer.css'
import Drawer from '@material/react-drawer'

class TestDrawer extends Component {
  state = {
    openDrawer: false,
  }

  openCloseDrawer = () => {
    this.setState(prevstate => ({
      openDrawer: !prevstate.openDrawer,
    }))
  }
  render() {
    const { openDrawer } = this.state
    return (
      <div>
        <Drawer dismissible open={openDrawer}>
          <div style={{height:'260px', background:'rebeccapurple'}}>
            <h3 style={{color:'white'}}>Your really cool app content here</h3>
            <h3 style={{color:'white'}}>that&acute;s a whole lotta meatballs you got there</h3>
          </div>
        </Drawer>
        <button onClick={this.openCloseDrawer}>
          {openDrawer ? 'Open' : 'Close'} Drawer
        </button>
      </div>
    )
  }
}
export default TestDrawer;

And imported it to my index page like so.

import React from 'react'
import { Link } from 'gatsby'

import Layout from '../components/layout'
import Image from '../components/image'
import TestDrawer from '../components/TestDrawer'

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: '300px', marginBottom: '1.45rem' }}>
      <Image />
    </div>
    <div>
      Material Components drawer
      <TestDrawer />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

Ran gatsby develop no issues there. The issue you reported did not pop.
Ran gatsby build. I'm presented with the following:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  350 |  */function createFocusTrapInstance(surfaceEl){var focusTrapFactory=arguments.length>1&&arguments[1]!==undefined?arguments[1]:__WEBPACK_IMPORTED_MODULE_0_focus_trap___default.a;return focusTrapFactory(surfaceEl,{clickOutsideDeactivates:true,initialFocus:false,// Navigation drawer handles focusing on active nav item.
  351 | escapeDeactivates:false,// Navigation drawer handles ESC.
> 352 | returnFocusOnDeactivate:false});}/***/},/***/105:/***/function _(module,exports){var candidateSelectors=['input','select','textarea','a[href]','button','[tabindex]','audio[controls]','video[controls]','[contenteditable]:not([contenteditable="false"])'];var candidateSelector=candidateSelectors.join(',');var matches=Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector;function tabbable(el,options){options=options||{};var elementDocument=el.ownerDocument||el;var regularTabbables=[];var orderedTabbables=[];var untouchabilityChecker=new UntouchabilityChecker(elementDocument);var candidates=el.querySelectorAll(candidateSelector);if(options.includeContainer){if(matches.call(el,candidateSelector)){candidates=Array.prototype.slice.apply(candidates);candidates.unshift(el);}}var i,candidate,candidateTabindex;for(i=0;i<candidates.length;i++){candidate=candidates[i];if(!isNodeMatchingSelectorTabbable(candidate,untouchabilityChecker))continue;candidateTabindex=getTabindex(candidate);if(candidateTabindex===0){regularTabbables.push(candidate);}else{orderedTabbables.push({documentOrder:i,tabIndex:candidateTabindex,node:candidate});}}var tabbableNodes=orderedTabbables.sort(sortOrderedTabbables).map(function(a){return a.node;}).concat(regularTabbables);return tabbableNodes;}tabbable.isTabbable=isTabbable;tabbable.isFocusable=isFocusable;function isNodeMatchingSelectorTabbable(node,untouchabilityChecker){if(!isNodeMatchingSelectorFocusable(node,untouchabilityChecker)||isNonTabbableRadio(node)||getTabindex(node)<0){return false;}return true;}function isTabbable(node,untouchabilityChecker){if(!node)throw new Error('No node provided');if(matches.call(node,candidateSelector)===false)return false;return isNodeMatchingSelectorTabbable(node,untouchabilityChecker);}function isNodeMatchingSelectorFocusable(node,untouchabilityChecker){untouchabilityChecker=untouchabilityChecker||new UntouchabilityChecker(node.ownerDocument||node);if(node.disabled||isHiddenInput(node)||untouchabilityChecker.isUntouchable(node)){return false;}return true;}var focusableCandidateSelector=candidateSelectors.concat('iframe').join(',');function isFocusable(node,untouchabilityChecker){if(!node)throw new Error('No node provided');if(matches.call(node,focusableCandidateSelector)===false)return false;return isNodeMatchingSelectorFocusable(node,untouchabilityChecker);}function getTabindex(node){var tabindexAttr=parseInt(node.getAttribute('tabindex'),10);if(!isNaN(tabindexAttr))return tabindexAttr;// Browsers do not return `tabIndex` correctly for contentEditable nodes;
      |                                                                                                                                                                                                                                                                                                                 ^
  353 | // so if they don't have a tabindex attribute specifically set, assume it's 0.
  354 | if(isContentEditable(node))return 0;return node.tabIndex;}function sortOrderedTabbables(a,b){return a.tabIndex===b.tabIndex?a.documentOrder-b.documentOrder:a.tabIndex-b.tabIndex;}// Array.prototype.find not available in IE.
  355 | function find(list,predicate){for(var i=0,length=list.length;i<length;i++){if(predicate(list[i]))return list[i];}}function isContentEditable(node){return node.contentEditable==='true';}function isInput(node){return node.tagName==='INPUT';}function isHiddenInput(node){return isInput(node)&&node.type==='hidden';}function isRadio(node){return isInput(node)&&node.type==='radio';}function isNonTabbableRadio(node){return isRadio(node)&&!isTabbableRadio(node);}function getCheckedRadio(nodes){for(var i=0;i<nodes.length;i++){if(nodes[i].checked){return nodes[i];}}}function isTabbableRadio(node){if(!node.name)return true;// This won't account for the edge case where you have radio groups with the same


  WebpackError: ReferenceError: Element is not defined

  - index.js:352 Object._
    [lib]/[@material]/react-drawer/dist/index.js:352:305

  - index.js:148 __webpack_require__
    [lib]/[@material]/react-drawer/dist/index.js:148:1

  - index.js:761 Object._
    [lib]/[@material]/react-drawer/dist/index.js:761:483

  - index.js:148 __webpack_require__
    [lib]/[@material]/react-drawer/dist/index.js:148:1

  - index.js:325 Object._
    [lib]/[@material]/react-drawer/dist/index.js:325:576

  - index.js:148 __webpack_require__
    [lib]/[@material]/react-drawer/dist/index.js:148:1

  - index.js:258 Object._
    [lib]/[@material]/react-drawer/dist/index.js:258:1439

  - index.js:148 __webpack_require__
    [lib]/[@material]/react-drawer/dist/index.js:148:1

  - index.js:157 0
    [lib]/[@material]/react-drawer/dist/index.js:157:1

  - index.js:157
    [lib]/[@material]/react-drawer/dist/index.js:157:72

  - index.js:139 webpackUniversalModuleDefinition
    [lib]/[@material]/react-drawer/dist/index.js:139:132

  - index.js:142 Object.<anonymous>
    [lib]/[@material]/react-drawer/dist/index.js:142:275

  - index.js:773 Object._typeof
    [lib]/[@material]/react-drawer/dist/index.js:773:29

  - index.js:30 __webpack_require__
    [lib]/[@material]/react-drawer/dist/index.js:30:1

  - index.js:107 Object._typeof
    [lib]/[@material]/react-drawer/dist/index.js:107:1171

  - index.js:30 __webpack_require__
    [lib]/[@material]/react-drawer/dist/index.js:30:1

It looks like that the library is not optimized for server side rendering and in order to make it work, some additional steps need to be made, namely add some webpack plugins and also tweak gatsby-node.js file

adrianwix · 2018-11-29T19:57:05Z

Hi, Sorry for not answering before. I used the Netlify CMS starter. Yes it is basically a problem while building the app. Because of the Material Library.
Is there any way to solve the issue?
I was thinking about using material-components-web as it only use vanilla css (or sass) and instantiate the component in componentDidMount. Like this https://stackblitz.com/edit/material-web-test
The repo is here Healthy Katz

jonniebigodes · 2018-12-03T16:22:04Z

@adrianwix i've been at this particular issue for the past 4 days, and no luck in solving it.
I've cloned your repo, and tried to make it work, taking on different approaches at it like for instance:

Changing the gatsby-config.js in order for the scss to be imported correctly.
Added the babel preset for gatsby and also the babel libraries stated on the documentation.
Adjusted the gatsby-node.js file to reflect the material components documentation, in regards of webpack configuration
Added a specific wrapper for React, as mentioned for the documentation.

And despite taking several cracks at it.
Still no luck, same error.
The issue here and i'm just guessing is that as gatsby works on the server side of the spectrum and the material library you mentioned is on the other side, on the client side.
When gatsby starts the build process, it will try to gain access to an api that's not accessible to it. And causes that error and prevent the build.
I know that on a development mode like i said on my previous comment the wrapper i used and the one you're using works, but in development mode gatsby is way more permissive than when you want a final build.
Sorry for not being more of a help.
Could be that someone more knowledgeable could solve this issue and make the library play nice with gatsby.

adrianwix · 2018-12-03T17:32:59Z

material-components/material-components-web#4104. Here is the problem. Thanks for your help. It looks like it was a dependency issue.

jonniebigodes · 2018-12-03T20:44:58Z

Glad you figured out the issue.

jonniebigodes added status: needs more info Needs triaging and reproducible examples or more information to be resolved status: needs reproduction This issue needs a simplified reproduction of the bug for further troubleshooting. labels Nov 25, 2018

adrianwix closed this as completed Dec 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Material Design Drawer causing Build error #10108

Material Design Drawer causing Build error #10108

adrianwix commented Nov 23, 2018

jonniebigodes commented Nov 25, 2018 •

edited

Loading

jonniebigodes commented Nov 29, 2018

adrianwix commented Nov 29, 2018 •

edited

Loading

jonniebigodes commented Dec 3, 2018

adrianwix commented Dec 3, 2018 •

edited

Loading

jonniebigodes commented Dec 3, 2018

Material Design Drawer causing Build error #10108

Material Design Drawer causing Build error #10108

Comments

adrianwix commented Nov 23, 2018

Description

Steps to reproduce

Expected result

Actual result

Environment

jonniebigodes commented Nov 25, 2018 • edited Loading

jonniebigodes commented Nov 29, 2018

adrianwix commented Nov 29, 2018 • edited Loading

jonniebigodes commented Dec 3, 2018

adrianwix commented Dec 3, 2018 • edited Loading

jonniebigodes commented Dec 3, 2018

jonniebigodes commented Nov 25, 2018 •

edited

Loading

adrianwix commented Nov 29, 2018 •

edited

Loading

adrianwix commented Dec 3, 2018 •

edited

Loading