window is not defined

[CamilaSolis]

Hello again! I have a previous page made in React and I want to pass it to this pack for SEO issues, but I'm having a very recurring problem, the console says "window is not defined" and I found some small solutions to solve the problem, but also I get the same problem in several packages, for example 'react-toolbox / lib / font_icon' and I'm not supposed to modify them.

I sent one of the codes that has been causing me the most problems, thanks for the help and sorry for my bad English, I am using Google translator.

import React, { Component } from 'react'
import FontIcon from 'react-toolbox/lib/font_icon'
import classNames from 'classnames/bind'
import styles from './Slider2D.scss'
import { List } from 'immutable'
const classes = classNames.bind(styles)

type Props = {
  width: number;
  itemsWidth: number;
  showArrows: boolean;
  children: List<any>;
};

type State = {
  offset: number;
};

class Slider2D extends Component {
  props: Props;
  state: State;

  static defaultProps = {
    showArrows: true,
  };

  nextStep: (event: UIEvent) => void;
  prevStep: (event: UIEvent) => void;

  constructor (props: Props) {
    super(props)

    this.state = {
      offset: 0,
    }

    this.nextStep = this.nextStep.bind(this)
    this.prevStep = this.prevStep.bind(this)
  }

  nextStep (event: Event) {
    event.stopPropagation()
    event.preventDefault()
    this.setState((prevState) => ({ offset: prevState.offset + 1 }))
  }

  prevStep (event: Event) {
    event.stopPropagation()
    event.preventDefault()
    this.setState((prevState) => ({ offset: prevState.offset - 1 }))
  }

  componentWillReceiveProps (nextProps: Props) {
    if (this.props.width < nextProps.width) {
      this.setState({ offset: 0 })
    }
  }

  render () {
    const {
      children,
      showArrows,
      itemsWidth,
    } = this.props
    const { offset } = this.state

    const width = this.props.width < 900 ? this.props.width : 900

    let baseOffset = 0
    const trackWidth = children.size * itemsWidth
    if (trackWidth > width) {
      baseOffset = (1 - (children.size & 1)) * itemsWidth / 2
    }
    const firstVisiblePos = baseOffset + (trackWidth / 2) - (width / 2) + offset * itemsWidth
    const lastVisiblePos = firstVisiblePos + width

    const trackStyle = {
      transform: `translateX(${-1 * offset * itemsWidth - baseOffset}px)`,
      minWidth: trackWidth,
    }

    return (
      <section className={classes({ slider: true })}>
        <div className={classes({ sliderTrack: true })}>
          <nav style={trackStyle}>
            {children.map((el, i) => (
              <div
                key={i}
                className={classes({
                  outOfFocus: (i * itemsWidth < firstVisiblePos || (i + 1) * itemsWidth > lastVisiblePos),
                })}
                style={{ minWidth: itemsWidth }}>{el}</div>
            ))}
          </nav>
          {showArrows && (
            <div className={classes({ arrows: true })} style={{ width: this.props.width-17 }}>
              <a
                className={classes({ notActive: firstVisiblePos <= 0 })}
                onClick={this.prevStep}>
                <FontIcon className={classes({ icon: true })} value="chevron_left" />
              </a>
              <a
                className={classes({ notActive: lastVisiblePos >= (children.size * itemsWidth) })}
                onClick={this.nextStep}>
                <FontIcon className={classes({ icon: true })} value="chevron_right" />
              </a>
            </div>
          )}
        </div>

      </section>
    )
  }
}

export default Slider2D

[oyeanuj]

@CamilaSolis It is hard to investigate without looking through the code but FWIW, my guess is that a library that you are using doesn't support SSR (which is enabled in this setup). In other words, a library is probably trying to use window object which doesn't exist on the server (only on the browser).

You can either disable SSR on this repo, or try commenting out libraries that you've added (like react-toolbox) until it works. And then I'd recommend creating an issue on those libraries since the libraries should be checking for existence of the window object before using it.

Hope it helps!