TypeError: Cannot read property 'userAgent' of undefined

Question

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

Carswell

@Tushar please see edits – Carswell

As stated in the documentation, ExecJS doesn't support require(). – Ironist

Have you tried dropping the js code as the <script> tag in some main template? – Ironist

@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... – Carswell

That's interesting. What is the difference in setup between your current app and the dome one, then? – Ironist

@virzen please see edits.... – Carswell

Let us continue this discussion in chat. – Ironist

@virzen above mention code is from my actual application and it works, but if i integrate slick-carousel(in any other slider/carousel) it gives problem – Carswell

Answer 1

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',
}

Cymogene

What did you tried? Using the global? Also are you trying to do SSR in ruby? – Cymogene

I have written >> global.navigator = { userAgent: 'node', } At begging of the page above ''use strict'; line – Carswell

Since it's the module who uses it, you have to make sure it's set even before your react app is initialized, if you can do that it should work. SSR means server side rendering, is this what you are trying to achieve in ruby? – Cymogene

i have webpack.server and webpack.client.base.config files , i am not sure where should i put your solution, – Carswell

can you try using the DefinePlugin to set the navigator userAgent then? – Cymogene

i am using react on rails – Carswell

I've been trying to find this answer for 1.5 hour. Thank yoU! – Indivisible

@DmitryParanyushkin glad it helped! :) – Cymogene

Answer 2

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.

Enki