最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - TypeError: Cannot read property 'userAgent' of undefined - Stack Overflow

programmeradmin2浏览0评论

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
 |  Show 3 more ments

2 Answers 2

Reset to default 11 +25

The 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:

  1. remove node_module, reinstall everything;
  2. Make sure you install the correct version of package, eg react@16 should use rerender@16.
发布评论

评论列表(0)

  1. 暂无评论