title: GatsbyJS Build – window is not defined / module is not defined
body: <p>When trying to build my GatsbyJS project I ran into, what seems to be a fairly common issue:</p>
  
  <pre><code>WebpackError: ReferenceError: window is not defined
  </code></pre>
  
  <p><br/>
  When googling I found out that this is a fairly common issue. So I moved into <code>componentDidMount</code> with requiring the module like this</p>
  
  <pre><code>if (typeof window !== `undefined`) {
    const Flickity = require('react-flickity-component');
  }
  </code></pre>
  
  <p><br/>
  Which causes other issues</p>
  
  <pre><code>121:13  warning  'Flickity' is assigned a value but never used                                                              no-unused-vars
  170:12  error    'Flickity' is not defined                                                                                  react/jsx-no-undef
  </code></pre>
  
  <p><br/>
  Moving to the other options available, using webpack to exclude offending modules</p>
  
  <pre><code>exports.onCreateWebpackConfig = ({ stage, loaders, actions }) =&gt; {
    if (stage === "build-html") {
      actions.setWebpackConfig({
        module: {
          rules: [
            {
              test: /react-flickity-component/,
              use: loaders.null(),
            },
            {
              test: /flickity-fullscreen/,
              use: loaders.null(),
            },
          ],
        },
      })
    }
  }
  </code></pre>
  
  <p><br/>
  Which also gives me headache</p>
  
  <pre><code>Error: Invariant Violation: Minified React error #130; visit https://reactjs.o  rg/docs/error-decoder.html?invariant=130&amp;args[]=object&amp;args[]= for the full me  ssage or use the non-minified dev environment for full errors and additional h  elpful warnings.
  
    - Error
  
    - react-dom-server.node.production.min.js:10 ba
      [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :10:312
  
    - react-dom-server.node.production.min.js:11 u
      [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :11:166
  
    - react-dom-server.node.production.min.js:39 a.render
      [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :39:88
  
    - react-dom-server.node.production.min.js:35 a.read
      [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :35:450
  
    - react-dom-server.node.production.min.js:47 renderToString
      [www]/[react-dom]/cjs/react-dom-server.node.production.min.js    :47:59
  
    - render-page.js:825 Object../.cache/static-entry.js.__webpack_exports__.defau    lt
      /Users/per.sturesson/WWW/intermission.studio/www/public/rende    r-page.js:825:18
  
    - worker.js:35 e
      [www]/[gatsby]/dist/utils/worker.js:35:36
  
    - debuggability.js:313 Promise._execute
      [www]/[bluebird]/js/release/debuggability.js:313:9
  
    - promise.js:483 Promise._resolveFromExecutor
      [www]/[bluebird]/js/release/promise.js:483:18
  
    - promise.js:79 new Promise
      [www]/[bluebird]/js/release/promise.js:79:10
  
    - worker.js:31 Promise.map.path
      [www]/[gatsby]/dist/utils/worker.js:31:37
  
    - util.js:16 tryCatcher
      [www]/[bluebird]/js/release/util.js:16:23
  
    - map.js:61 MappingPromiseArray._promiseFulfilled
      [www]/[bluebird]/js/release/map.js:61:38
  
    - promise_array.js:114 MappingPromiseArray.PromiseArray._iterate
      [www]/[bluebird]/js/release/promise_array.js:114:31
  
    - promise_array.js:78 MappingPromiseArray.init
      [www]/[bluebird]/js/release/promise_array.js:78:10
  </code></pre>
  
  <p>Any way to get around all this?
  If I exclude the module from the project all together it will build successfully.</p>