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

问题在于您显然正在尝试渲染您的应用服务器端（或者至少在非浏览器环境中需要它）。

其中一个依赖项是尝试访问全局SELECT ARM_KEYID, ARD_KEYID, FCT_FACTORYID, FCT_NAME, AUC_AUDITTYPEID, ATM_DESCRIPT, LIN_LINEID, LIN_DESCRIPTION, CEL_CELLID, CEL_DESCRIPTION,ARM_EMPID, AUDITOR.EMP_NAME, ARM_REPDATE, AUC_WEEKNO,AUC_FROMDATE, AUC_TILLDATE, (SELECT OPD_DESCRIPT FROM OPERATIONSDETAILS OPD WHERE OPD.OPD_KEYID = OPDDETAILS.OPD_PARENTID), OPD_OPNO, OPD_DESCRIPT, CLD_OPNO, CLD_DESCRIPT, ALM_KEYID, CASE WHEN ALD_PRIORITY = 'H' THEN 'High' WHEN ALD_PRIORITY = 'M' THEN 'Medium' WHEN ALD_PRIORITY = 'L' THEN 'Low' END AS ALD_PRIORITY, ARD_FEEDBACK, ARD_NCCLASSIFICATION, ALD_NCACTION, OWNER.EMP_NAME, dpt_description , ALD_TARGETDATE, COMPLETED.EMP_NAME, ALD_COMPLETIONDATE, ALD_COMPREMARKS, CASE WHEN ALD_STATUS = 'Y' THEN DATEDIFF(DAY, ALD_COMPLETIONDATE, ALD_TIMESTAMP) ELSE DATEDIFF(DAY, GETDATE(), ALD_TIMESTAMP) END AS PENDING_DAYS, CASE WHEN ALD_STATUS = 'Y' THEN 'COMPLETED' WHEN ALD_STATUS = 'N' THEN 'PENDING' END AS LAD_STATUS FROM AUDITREPORTMASTER, AUDITREPORTDETAILS, CHECKLISTDETAILS, AUDITCALENDAR, OPERATIONSMASTER, OPERATIONSDETAILS OPDDETAILS, ACTIONLISTMASTER, ACTIONLISTDETAILS, AUDITTYPEMASTER, CELLMASTER, EMPLOYEEMASTER AUDITOR, EMPLOYEEMASTER OWNER, EMPLOYEEMASTER COMPLETED, FACTORYMASTER,LINEMASTER, departmentmaster WHERE ARD_NCSTATUS = 'N' AND ARD_RECNO = '1' AND AUC_ACTIVE = 'Y' AND ARM_KEYID = ARD_MASTERID AND CLD_KEYID = ARD_CKDETAILID AND AUC_KEYID = ARM_CALENDARID AND AUC_OPDKEYID = OPD_KEYID AND OPM_KEYID = OPD_OPMASTERID AND ATM_KEYID = AUC_AUDITTYPEID AND CEL_CELLID = AUC_LINEID AND LIN_LINEID = AUC_SECTIONID AND ARM_EMPID = AUDITOR.EMP_EMPLOYEEID AND ALD_OWNER =* OWNER.EMP_EMPLOYEEID AND DPT_DEPARTMENTID *= OWNER.emp_departmentid AND ALD_COMPLETEDBY =* COMPLETED.EMP_EMPLOYEEID AND FCT_FACTORYID = AUC_FACTORYID AND ALD_AUDITDETAILID = ARD_KEYID AND ALM_KEYID = ALD_MASTERID AND ARM_ACTIVE = 'Y' AND AUC_AUDITTYPEID = 'ATM/01' ORDER BY FCT_FACTORYID, OPM_AUDITTYPEID, CEL_CELLID, ARM_REPDATE;对象的userAgent属性，该属性仅在浏览器中定义。

要避免此问题，您可以尝试隔离插件，只需要在浏览器上检查插件，并检查您的红宝石中的navigator或等效内容。

您也可以简单地将变量模拟为默认值，因此它不会崩溃。只需将其定义为：

window

TypeError：无法读取属性＆＃39; userAgent＆＃39;未定义的

1 个答案: