Wsrtjtyk

When trying to build my GatsbyJS project I ran into, what seems to be a fairly common issue:

WebpackError: ReferenceError: window is not defined

When googling I found out that this is a fairly common issue. So I moved into componentDidMount with requiring the module like this

if (typeof window !== `undefined`) {

  const Flickity = require('react-flickity-component');

}

Which causes other issues

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

Moving to the other options available, using webpack to exclude offending modules

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {

  if (stage === "build-html") {

    actions.setWebpackConfig({

      module: {

        rules: [

          {

            test: /react-flickity-component/,

            use: loaders.null(),

          },

          {

            test: /flickity-fullscreen/,

            use: loaders.null(),

          },

        ],

      },

    })

  }

}

Which also gives me headache

Error: Invariant Violation: Minified React error #130; visit https://reactjs.o  rg/docs/error-decoder.html?invariant=130&args=object&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

Any way to get around all this?
If I exclude the module from the project all together it will build successfully.