React-id-swiper: navigator is not defined

[maheshambiga]

I am trying to add this in an isomorphic app. When the server-side code is being run, app throws below error as navigator obj is undefined.

node_modules\swiper\dist\js\swiper.js:3627
var ua = navigator.userAgent.toLowerCase();
^
ReferenceError: navigator is not defined.

Could you please help me on how to get rid of this issue.

[maheshambiga]

One solution I came up with is, requiring 'swiper' inside 'componentDidMount' as requiring at the top looking for navigator object immediately.

componentDidMount: function () {
var Swiper = require('swiper');
this.swiper = Swiper(ReactDOM.findDOMNode(this), objectAssign({}, this.props));
}

[kidjp85]

@maheshambiga : Swiper is client side library, it will get error when u try to init or render it on server side. There is a similar issue here https://github.com/nolimits4web/Swiper/issues/1541

[maheshambiga]

@kidjp85 : initial set of html is created on server-side, event binding is done in client-side later on. For this reason, Swiper module needs to be initialized only inside 'componentDidMount' method. This way we can make sure that swiper code gets executed only in browser and it just works fine.

[kidjp85]

It should be fixed by idea from this https://github.com/nolimits4web/Swiper/issues/1541