Gatsby build fails

[bbrinx]

When deploying a Gatsby app with the react-slidez, the build fails due to a window is not defined error. As far as I know this could fixed as simple as this:

// Wrap the require in check for window
if (typeof window !== `undefined`) {
  const module = require("module")
}

-------------Netlify Output-------------

7:51:04 PM: error Building static HTML failed
7:51:04 PM: See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
7:51:04 PM:   500 | 	// to operate correctly into non-standard environments
7:51:04 PM:   501 | 	// @see https://github.com/webpack-contrib/style-loader/issues/177
7:51:04 PM: > 502 | 	return window && document && document.all && !window.atob;
7:51:04 PM:       | ^
7:51:04 PM:   503 | });
7:51:04 PM:   504 |
7:51:04 PM:   505 | var getElement = (function (fn) {
7:51:04 PM: 
7:51:04 PM:   WebpackError: ReferenceError: window is not defined
7:51:04 PM:   
7:51:04 PM:   - index.js:502 
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:502:1
7:51:04 PM:   
7:51:04 PM:   - index.js:491 
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:491:1
7:51:04 PM:   
7:51:04 PM:   - index.js:536 ./node_modules/react-slidez/build/index.js.module.exports.modul    e.exports [as exports]
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:536:1
7:51:04 PM:   
7:51:04 PM:   - index.js:85 Object.<anonymous>
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:85:1
7:51:04 PM:   
7:51:04 PM:   - index.js:21 __webpack_require__
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:21:1
7:51:04 PM:   
7:51:04 PM:   - index.js:122 Object../node_modules/react-slidez/build/index.js.module.export    s.Object.defineProperty.value
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:122:1
7:51:04 PM:   
7:51:04 PM:   - index.js:21 __webpack_require__
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:21:1
7:51:04 PM:   
7:51:04 PM:   - index.js:160 Object.<anonymous>
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:160:1
7:51:04 PM:   
7:51:04 PM:   - index.js:21 __webpack_require__
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:21:1
7:51:04 PM:   
7:51:04 PM:   - index.js:67 
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:67:1
7:51:04 PM:   
7:51:04 PM:   - index.js:70 Object../node_modules/react-slidez/build/index.js
7:51:04 PM:     [lib]/[react-slidez]/build/index.js:70:1
7:51:04 PM:   
7:51:04 PM:   - bootstrap:19 __webpack_require__
7:51:04 PM:     lib/webpack/bootstrap:19:1
7:51:04 PM:   
7:51:04 PM:   - border.js:1 Module../src/pages/border.js
7:51:04 PM:     lib/src/pages/border.js:1:1
7:51:04 PM:   
7:51:04 PM:   - bootstrap:19 __webpack_require__
7:51:04 PM:     lib/webpack/bootstrap:19:1
7:51:04 PM:   
7:51:04 PM:   - sync-requires.js:10 Object../.cache/sync-requires.js
7:51:04 PM:     lib/.cache/sync-requires.js:10:56
7:51:04 PM:   
7:51:04 PM:   - bootstrap:19 __webpack_require__
7:51:04 PM:     lib/webpack/bootstrap:19:1

[Pau1fitz]

Hey, I can see this is a fairly common issue - gatsbyjs/gatsby#8190

It is webpack that is adding the window it, isn't actually in my code, so I am not really too sure how I can get around this. If you know what needs to be done feel free to add a PR, or else if you can provide clearer guidance on how to fix this I can do it.

Thanks

[dhurlburtusa]

This also happens with server-side-rendering (effectively what Gatsby does to generate the static HTML, CSS, etc). The reason the problem is arising is because of the use of the style-loader in the webpack.config.js.

Here are a couple ideas for making this package Gatsby and SSR friendly.

1. Don't bundle the CSS into the JS bundle. That is, don't use style-loader. Need to do something to make the CSS a separate file. It already is a separate file in src/Slideshow.css. I don't think you need the css-loader either since you are not using anything in Slideshow.css that the css-loader handles, such as @import. People who use this package will need to import the CSS separately. Just need to document where to import it. It could be from src/Slideshow.css, however, it is very common to have a dist directory that has the compiled assets. So, dist/Slideshow.css would probably be ideal.

I can create a PR for this. It will be a major version change. Let me know if you want me to do that.

2. Use isomorphic-style-loader in place of style-loader.

This probably won't be a major version change.

[dhurlburtusa]

BTW, here is the work around I just added to the project I am having SSR issues.

Instead of

import Slideshow from 'react-slidez';

I am using

let Slideshow;
if (process.env.BROWSER) {
  // We are only importing `react-slidez` in the browser bundle since it currently
  // includes references to `window` and `document`.
  // eslint-disable-next-line global-require
  Slideshow = require('react-slidez');
} else {
  // The server bundle will just render nothing.
  Slideshow = () => null;
}

Note: We are setting process.env.BROWSER via our project's webpack config but it could be set many other ways.

Sorry Gatsby users, this work-around won't work in Gatsby.

[Pau1fitz]

@dhurlburtusa if you create a PR that would be great

[JonathanLehner]

i got it to work in gatsby with the following code.

``

[JonathanLehner]

`import React from 'react'
import PropTypes from 'prop-types'
import slide1 from '../img/products-grid1.jpg'
import slide2 from '../img/products-grid2.jpg'
import slide3 from '../img/products-grid3.jpg'

export const HTMLContent = ({ content, className }) => (

)

let SlideshowX;
if (typeof window !== undefined) {
// otherwise: WebpackError: ReferenceError: window is not defined
const Slideshow = require('react-slidez').default;

// We are only importing react-slidez in the browser bundle since it currently
// includes references to window and document.
// eslint-disable-next-line global-require
SlideshowX = (
<Slideshow
showIndex
showArrows
autoplay
enableKeyboard
useDotIndex
slideInterval={5000}
defaultIndex={1}
effect={'fade'}
height={'100%'}
width={'100%'}
>




)
} else {
// The server bundle will just render nothing.
SlideshowX =

loading...

;
}

const Content = ({ content, className }) => (

{content}

{SlideshowX}

)

Content.propTypes = {
content: PropTypes.node,
className: PropTypes.string,
}

HTMLContent.propTypes = Content.propTypes

export default Content
`

[JonathanLehner]

sorry for the bad formatting, github won't let me post it as code

[mpolinowski]

This solves it for me:

import React from "react"

import Slideshow from 'react-slidez'

import ComponentOne from "../components/ComponentOne"
import ComponentTwo from "../components/ComponentTwo"
import Checkout from "../components/Checkout"

export default class SliderPage extends React.Component {
  render() {
    if (typeof window !== 'undefined') {
      return (
          <React.Fragment>
            <Slideshow
              showIndex
              showArrows
              autoplay
              enableKeyboard
              useDotIndex
              slideInterval={8000}
              defaultIndex={1}
              effect={'right'}
              height={'100%'}
              width={'100%'} >
              <ComponentOne />
              <ComponentTwo />
              <Checkout />
            </Slideshow>
          </React.Fragment>
      )
    }
    return null
  }
}

[ryee-dev]

having the same issue as OP. Tried everything so far and no luck :/