Swiper: server bug: navigator is not defined

[droganov]

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.

[nolimits4web]

Swiper is client-side only library, there is no sense to init/render it on server side

[droganov]

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"

[nathanharper]

Can we reopen? This is a legitimate complaint. It means if you're using Webpack or Browserify or similar your only real option is to use the CDN, as far as I can tell.

[hheexx]

@nolimits4web

Please reopen this.
We are not trying to render Swiper on server.
Your lib is braking apps with server side rendering just by being imported.

You should just not touch the DOM before Swiper constructor is called.
It shouldn't be hard.

[hheexx]

Here is pull request that fixes the problem
https://github.com/nolimits4web/Swiper/pull/1960

[GingerBear]

I was using react-id-swiper (a wrapper around swiper), and I was able to get around this by

  componentDidMount() {
    this.setState({
      Swiper: require('react-id-swiper')
    });
  },

  render() {
    const { Swiper } = this.state;
    if (!Swiper) return null;

    return (
      <Swiper>
        ...
      </Swiper>
    );
  }

thanks to the idea from https://github.com/kidjp85/react-id-swiper/issues/14#issuecomment-228673157

[renatogalvones]

@GingerBear could u link here the file where you managed to put this to work properly?

I'm trying the same here and I'm still not being able to make it work.

[GingerBear]

@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;

[renatogalvones]

@GingerBear thank you so much!!!

Worked like a charm!

PS: My bad about taking this looooong to answer here.

[catamphetamine]

Booooooo.
Not supporting server side in 2017 is so lame.
Will have to fork this probably.

[catamphetamine]

@GingerBear your solution works.
It can be also extracted into a component which can be used instead of the original <Swiper/>:

import React, { Component } from 'react'

// https://github.com/nolimits4web/Swiper/issues/1541#issuecomment-271439046
export default class FixedSwiper extends Component {
  state = {}

  componentDidMount() {
    this.setState({
      Swiper: require('react-id-swiper')
    })
  }

  render() {
    const { Swiper } = this.state

    if (!Swiper) {
      return null
    }

    return <Swiper {...this.props}>{this.props.children}</Swiper>
  }
}

[jonataswalker]

Hey this is half of 2017. Please keep the library relevant.

[PsychicCat]

Please consider reopening this issue.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.