Component breaks SSR

[avnersorek]

When trying to render this on the server I get -

ReferenceError: window is not defined
  at Object.<anonymous> (/home/nodejs/app/node_modules/flickity/js/index.js:39:5)

[theolampert]

Closing this in favour of #5

[danielmahon]

For anyone that needs, I was able to get SSR working with something like the following (Gatsby example):

class Testimonials extends Component {
  state = { Flickity: null };
  constructor(props) {
    super(props);
    if (typeof window !== 'undefined') {
      const Flickity = require('react-flickity-component');
      this.state.Flickity = Flickity;
    }
  }
  render() {
    const { Flickity } = this.state;
    const { data: { testimonials } } = this.props;
    return (
      <section className="text-center imagebg" data-overlay="8">
        <div className="background-image-holder">
          <img alt="background" src={bgImage} />
        </div>
        <div className="container">
          <div className="row">
            <div className="col-lg-8 col-md-10">
              <div className="slider">
                {Flickity && (
                  <Flickity
                    className={'slides'}
                    elementType={'ul'}
                    options={{
                      wrapAround: true,
                      autoPlay: true,
                      draggable: true,
                      pageDots: false,
                      prevNextButtons: false,
                    }}>
                    {testimonials.edges.map(({ node }) => (
                      <li key={node.id}>
                        <div className="testimonial">
                          <blockquote>{node.frontmatter.quote}</blockquote>
                          <h5>{node.frontmatter.title}</h5>
                          <span className="type--fade">
                            {node.frontmatter.location}
                          </span>
                        </div>
                      </li>
                    ))}
                  </Flickity>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }
}

[humbertqz]

I'm using this in the import and works:

const isBrowser = typeof window !== 'undefined'; const Flickity = isBrowser ? require('react-flickity-component') : 'div';

[kierangillen]

const Flickity =
  typeof window !== "undefined"
    ? require("react-flickity-component")
    : () => null

Use this above your component.

[frazerf]

Hey @kierangillen , I've just stumbled across your answer. I've got the same problem re. window error. Are you adding this directly below the imports? And are you excluding import Flickity from 'react-flickity-component'

Thanks