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;

As stated in [the documentation](https://github.com/sstephenson/execjs#faq), ExecJS doesn't support `require()`. — Wiktor Czajkowski, May 17 '17 at 09:10
@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, May 17 '17 at 09:13
That's interesting. What is the difference in setup between your current app and the dome one, then? — Wiktor Czajkowski, May 17 '17 at 09:17
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/144438/discussion-between-virzen-and-anish). — Wiktor Czajkowski, May 17 '17 at 09:19
@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 — Anish, May 17 '17 at 09:19

score 11 · Accepted Answer · answered May 20 '17 at 06:51

11

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

answered May 20 '17 at 06:51

Preview

35,317
10
92
112

What did you tried? Using the global? Also are you trying to do SSR in ruby? – Preview May 21 '17 at 15:58
I have written >> global.navigator = { userAgent: 'node', } At begging of the page above ''use strict'; line – Anish May 22 '17 at 06:48
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? – Preview May 22 '17 at 07:00
i have webpack.server and webpack.client.base.config files , i am not sure where should i put your solution, – Anish May 22 '17 at 07:04
1

can you try using the [DefinePlugin](https://webpack.js.org/plugins/define-plugin) to set the navigator userAgent then? – Preview May 22 '17 at 07:05
i am using [react on rails](https://github.com/shakacode/react_on_rails) – Anish May 22 '17 at 07:05
I've been trying to find this answer for 1.5 hour. Thank yoU! – Aerodynamika Mar 10 '18 at 11:38
@DmitryParanyushkin glad it helped! :) – Preview Mar 10 '18 at 19:03

score 0 · Answer 2 · answered Feb 16 '23 at 08:38

0

few approach:

remove node_module, reinstall everything;
Make sure you install the correct version of package, eg react@16 should use rerender@16.

answered Feb 16 '23 at 08:38

Weijing Jay Lin

2,991
6
33
53

TypeError: Cannot read property 'userAgent' of undefined

2 Answers2