I am trying to integrate react-slick slider into my ReactJS application.
Its working as expected when I integrate it into a new demo app, but if I integrate it into my own application it throws an error. I am using rails as backend.
When I try to import slider in ponent like
var Slider = require('react-slick');
it shows me an error.
error logs (in rails) are
| ExecJS::ProgramError - TypeError: Cannot read property 'userAgent' of undefined:| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:98:in `wrap_error'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:15:in `rescue in block in initialize'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:12:in `block in initialize' | execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:75:in `block in lock'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:73:in `lock'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:9:in `initialize'| execjs (2.7.0)
Edit
Some where else in my code I have written below code and it's working fine
'use strict';
var React = require('react');
import logo from 'img/spark-logo.jpg'
var Carousel = require('nuka-carousel');
//import { NukaDecorate } from 'nuka-carousel-autoscroll';
class App1 extends React.Component{
// mixins: [Carousel.ControllerMixin],
render() {
return (
<Carousel>
<img src={logo} alt="Smiley face" />
<img src="/&text=slide2"/>
<img src="/&text=slide3"/>
</Carousel>
)
}
}
module.exports = App1;
I am trying to integrate react-slick slider into my ReactJS application.
Its working as expected when I integrate it into a new demo app, but if I integrate it into my own application it throws an error. I am using rails as backend.
When I try to import slider in ponent like
var Slider = require('react-slick');
it shows me an error.
error logs (in rails) are
| ExecJS::ProgramError - TypeError: Cannot read property 'userAgent' of undefined:| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:98:in `wrap_error'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:15:in `rescue in block in initialize'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:12:in `block in initialize' | execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:75:in `block in lock'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:73:in `lock'| execjs (2.7.0)
lib/execjs/ruby_racer_runtime.rb:9:in `initialize'| execjs (2.7.0)
Edit
Some where else in my code I have written below code and it's working fine
'use strict';
var React = require('react');
import logo from 'img/spark-logo.jpg'
var Carousel = require('nuka-carousel');
//import { NukaDecorate } from 'nuka-carousel-autoscroll';
class App1 extends React.Component{
// mixins: [Carousel.ControllerMixin],
render() {
return (
<Carousel>
<img src={logo} alt="Smiley face" />
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide2"/>
<img src="http://placehold.it/1000x400/ffffff/c0392b/&text=slide3"/>
</Carousel>
)
}
}
module.exports = App1;
Share
Improve this question
edited May 19, 2017 at 12:31
Anish
asked May 15, 2017 at 4:59
AnishAnish
5583 gold badges10 silver badges33 bronze badges
8
- @Tushar please see edits – Anish Commented May 17, 2017 at 8:52
-
As stated in the documentation, ExecJS doesn't support
require()
. – Wiktor Czajkowski Commented May 17, 2017 at 9:10 -
Have you tried dropping the js code as the
<script>
tag in some main template? – Wiktor Czajkowski Commented May 17, 2017 at 9:11 - @virzen some where else in my code i use require it works, and yes i create a demo-app and use slick it also works... – Anish Commented May 17, 2017 at 9:13
- That's interesting. What is the difference in setup between your current app and the dome one, then? – Wiktor Czajkowski Commented May 17, 2017 at 9:17
2 Answers
Reset to default 11 +25The issue is that you are apparently trying to render your app server side (or at least it's required in a non-browser context).
One of the dependencies of is trying to access the userAgent
property of the global navigator
object, which is only defined in browsers.
To avoid this issue, you could try to isolate the plugin by only requiring it on the browser with a check on the window
or equivalent in your ruby.
You can also simply mock the variable to a default value, so it doesn't crash. Simply define it like:
global.navigator = {
userAgent: 'node',
}
few approach:
- remove node_module, reinstall everything;
- Make sure you install the correct version of package, eg react@16 should use rerender@16.