Odtnhj

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.

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 (
 <div class="container py-3 mb-5">
 <Flickity options=flickityOptions>
 <img src="https://via.placeholder.com/800x400?text=Hero1" />
 <img src="https://via.placeholder.com/800x400?text=Hero2" />
 <img src="https://via.placeholder.com/800x400?text=Hero3" />
 <img src="https://via.placeholder.com/800x400?text=Hero4" />
 <img src="https://via.placeholder.com/800x400?text=Hero5" />
 <img src="https://via.placeholder.com/800x400?text=Hero6" />
 </Flickity>
 </div>
 )
 
 return null