Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

server bug: navigator is not defined

See original GitHub issue

Usecase:

import Swiper from "swiper"

export default React.createClass({
   componentDidMount: function(){
      const swiper = new Swiper( this.refs.container, this.props.settings );
   },
});

If you try to render this on server side you’ll get: ReferenceError: navigator is not defined

Problem: Swiper is not isomorphic.

Issue Analytics

State:
Created 8 years ago
Reactions:3
Comments:14 (1 by maintainers)

Top GitHub Comments

10reactions

droganovcommented, Dec 28, 2015

There is a sense to require it in isomorphic app, that’s not said anyone is going to init it on server. Swiper fails here import Swiper from "swiper"

5reactions

GingerBearcommented, Feb 10, 2017

@renatogalvones this should work

import React, { Component } from 'react';
import 'swiper/dist/css/swiper.min.css'

class App extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const Swiper = require('swiper');
    const swiper = new Swiper(this.refs.container, {});
  }

  render() {
    return (
      <div className="swiper-container" ref="container">
        <div className="swiper-wrapper">
          <div className="swiper-slide"><img src="//placehold.it/500x300" /></div>
          <div className="swiper-slide"><img src="//placehold.it/500x300" /></div>
          <div className="swiper-slide"><img src="//placehold.it/500x300" /></div>
        </div>
        <div className="swiper-pagination"></div>

        <div className="swiper-button-prev"></div>
        <div className="swiper-button-next"></div>
      </div>
    );
  }
}

export default App;