GatsbyJS Build – window is not defined / module is not defined

Question

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.

user_1704381 · Answer

I successfully got flickity to build in my gatsby project by wrapping my flickity code in a window check.

I'm not sure if this is 'correct' or 'proper' but it does build:

import React, { Component } from 'react'
import Flickity from 'react-flickity-component'

import './flixity.css'

const flickityOptions = {
  wrapAround: true,
  adaptiveHeight: true,
  dragThreshold: 10
}

export default class Carousel extends Component {
  render() {
    if (typeof window !== 'undefined') {
      return (
        
          
            
            
            
            
            
            
          
        
      )
    }
    return null
  }
}

GatsbyJS Build – window is not defined / module is not defined

1 Answers