TypeError: Cannot read property 'userAgent' of undefined

Question

我正在尝试将 react-slick slider 集成到我的 ReactJS 应用程序中。

当我将它集成到一个新的演示应用程序中时，它按预期工作，但如果我将它集成到我自己的应用程序中，它就会抛出错误。我正在使用 rails 作为后端。

当我尝试在

这样的组件中导入滑块时

 var Slider = require('react-slick');

显示错误。

错误日志（在 rails 中）是

| 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)

编辑

我在代码的其他地方写了下面的代码并且工作正常

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

Answer 1

问题是您显然在尝试呈现您的应用程序服务器端（或者至少在非浏览器上下文中需要它）。

其中一个依赖项正在尝试访问全局 navigator 对象的 userAgent 属性，该对象仅在浏览器中定义。

为避免此问题，您可以尝试通过检查 window 或 ruby.

中的等效项来仅在浏览器上要求它来隔离插件

您也可以简单地将变量模拟为默认值，这样它就不会崩溃。简单地定义它：

global.navigator = {
  userAgent: 'node',
}

TypeError: Cannot read property 'userAgent' of undefined

TypeError: Cannot read property 'userAgent' of undefined

javascript

ruby-on-rails

reactjs

react-rails

react-on-rails