window is not defined when using with Gatsby (Webpack + React)

[alessandrojcm]

Hi there, I'm trying to use bulma carousel with Gatsby 2 but I', getting the following error when trying to build production HTML:

error Building static HTML failed

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

  1184 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return pointerEnter; });
  1185 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return pointerLeave; });
> 1186 | var isIE = window.navigator.pointerEnabled || window.navigator.msPointerEnabled;
       | ^
  1187 | var isIETouch = window.navigator.msPointerEnabled && window.navigator.msMaxTouchPoints > 1 || window.navigator.pointerEnabled && window.navigator.maxTouchPoints > 1;
  1188 | var isAndroid = navigator.userAgent.match(/(Android);?[\s\/]+([\d.]+)?/);
  1189 | var isiPad = navigator.userAgent.match(/(iPad).*OS\s([\d_]+)/);


  WebpackError: ReferenceError: window is not defined
  
  - bulma-carousel.js:1186 Object.<anonymous>
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:1186:1
  
  - bulma-carousel.js:30 __webpack_require__
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:30:1
  
  - bulma-carousel.js:1018 Object.isIE
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:1018:1
  
  - bulma-carousel.js:30 __webpack_require__
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:30:1
  
  - bulma-carousel.js:460 Object.uuid
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:460:1
  
  - bulma-carousel.js:30 __webpack_require__
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:30:1
  
  - bulma-carousel.js:73 
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:73:1
  
  - bulma-carousel.js:76 
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:76:1
  
  - bulma-carousel.js:3 webpackUniversalModuleDefinition
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:3:1
  
  - bulma-carousel.js:10 Object../node_modules/bulma-carousel/dist/js/bulma-carousel.js
    [lib]/[bulma-carousel]/dist/js/bulma-carousel.js:10:2
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - ImageCarousel.js:1 Module../src/components/ImageCarousel.js
    lib/src/components/ImageCarousel.js:1:1
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  
  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1
  
  - sync-requires.js:9 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:9:55

Here's the component that uses the carousel:

import React, { useEffect } from "react";
import PropTypes from "prop-types";

import "bulma-carousel/dist/css/bulma-carousel.min.css";

import bulmaCarousel from "bulma-carousel";

const ImageCarousel = ({
  images,
  slidesToShow,
  slidesToScroll,
  carouselType
}) => {
  const carouselRef = React.createRef();

  // This is like componentDidMount() in class based components.
  useEffect(() => {
    bulmaCarousel.attach(carouselRef.current, {
      slidesToShow,
      slidesToScroll,
      carouselType
    });
  }, [carouselRef]);

  return (
    <div className="carousel" ref={carouselRef}>
      {images.map((image, index) => (
        <img src={image.carouselImg} key={index} alt={image.imgAlt} />
      ))}
    </div>
  );
};

And here are my dependencies:

"dependencies": {
    "aphrodite": "^2.3.1",
    "bulma": "^0.7.4",
    "bulma-carousel": "^4.0.4",
    "classnames": "^2.2.6",
    "date-fns": "^2.0.0-alpha.27",
    "gatsby": "2.3.30",
    "gatsby-image": "^2.0.40",
    "gatsby-plugin-aphrodite": "^2.0.5",
    "gatsby-plugin-favicon": "^3.1.4",
    "gatsby-plugin-netlify": "^2.0.0",
    "gatsby-plugin-netlify-cms": "^3.0.0",
    "gatsby-plugin-react-helmet": "^3.0.0",
    "gatsby-plugin-sass": "^2.0.1",
    "gatsby-plugin-sharp": "^2.0.5",
    "gatsby-remark-images": "^3.0.11",
    "gatsby-source-filesystem": "^2.0.1",
    "gatsby-transformer-remark": "^2.1.1",
    "gatsby-transformer-sharp": "^2.1.1",
    "lodash": "^4.17.5",
    "lodash-webpack-plugin": "^0.11.4",
    "netlify-cms": "^2.1.1",
    "node-sass": "^4.9.2",
    "parcel-bundler": "^1.9.4",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.4.1",
    "react-google-maps": "^9.4.5",
    "react-helmet": "^5.2.0",
    "react-markdown": "^4.0.3",
    "react-spring": "^8.0.19",
    "sal.js": "^0.5.0",
    "uuid": "^3.2.1"
  }

I'm using Node 10.15.1 on Arch Linux 64 bits, if that may be of help. Also note that, in develop builds (i.e running gatsby develop) the carousel works just fine.

[Wikiki]

Hi @alessandrojcm ,

it's a classic issue with Gatsby and production build process. The workaround it to wrap all use of document or window element with the following code

if (typeof document !== 'undefined') {

}

or

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

}

[max-l]

I am getting the same issue, when I launch the server in production mode. I am using razzle (which uses webpack to build)

The problem is that it is the import of bulma itself that causes the problem, I cannot wrap the import as suggested above, because imports need to be top level.

import "bulma-carousel/dist/css/bulma-carousel.min.css";
import bulmaCarousel from 'bulma-carousel'  //<--- line alone causse the crash

yarn start:prod 
yarn run v1.15.2
$ NODE_ENV=production node build/server.js
/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:1186
var isIE = window.navigator.pointerEnabled || window.navigator.msPointerEnabled;
           ^

ReferenceError: window is not defined
    at Object.<anonymous> (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:1186:12)
    at __webpack_require__ (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:30:30)
    at Object.isIE (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:1018:72)
    at __webpack_require__ (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:30:30)
    at Object.prefix (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:460:79)
    at __webpack_require__ (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:30:30)
    at /home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:73:18
    at /home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:76:10
    at webpackUniversalModuleDefinition (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:3:20)
    at Object.<anonymous> (/home/maxou/dev/vizmmt/node_modules/bulma-carousel/dist/js/bulma-carousel.js:10:3)
error Command failed with exit code 1.

[max-l]

If I'm mot mistaken, this will crash all apps that uses server side rendering: https://github.com/Wikiki/bulma-carousel/blob/master/src/js/utils/device.js

[alessandrojcm]

I know this is not a fix per se, but I needed to get the carousel on the web ASAP; so I changed to react-slick and it worked great. It lets you pass custom components for the carousel's arrow; so you can easily style your components with bulma's icons.

[max-l]

This is my work around until the issue gets fixed, the line :

import bulmaCarousel from 'bulma-carousel'

is replaced by :

const bulmaCarousel = (() => {
    if (typeof window !== 'undefined') {
        return require('bulma-carousel')
    }
})()