How to require underscore in react-native

Question

The change log of react-native mentions https://facebook.github.io/react/blog/2015/04/17/react-native-v0.4.html

NPM modules compatibility: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, ...

But It doesn't work for me. It is how I install, through package.json

# package.json

 "dependencies": {
   "react-native": "*",
   "underscore": "^1.8.3"
   ...

And I indeed see it in the npm dependecy

# npm ls
├─┬ react-native@0.8.0
|  ...
├── react-native-navbar@0.7.3
└── underscore@1.8.3

And it does work for some other react components

It is how I require

var _ = require('underscore');

But it doesn't work, _ is undefined

are you using it in the same file ? can you paste in some code in your question? — WebQube, Aug 25 '15 at 18:13
No, the `underscore` library is under the `node_modules` folder, other libraries I used like `react-native-keyboardevents`, `react-native-navbar` all of them are under `node_modules`, too. But they work. I don't know what is the difference between them — Ilake Chang, Aug 26 '15 at 01:25
1. perhaps you are trying to use it from a different file ? a file where you haven't included the `underscore`? 2. maybe try to work with the browser's break points. cmd +d in your simulator and use the sources tab to debug this. — WebQube, Aug 26 '15 at 07:09
I had tried it in every files, but it didn't work. I debug this and `require('underscore')` in the console, and it returns `Error: Requiring unknown module "underscore". If you are sure the module is there, try restarting the packager.` And I did (close and npm start again). But it still fail. — Ilake Chang, Aug 26 '15 at 08:53

score 47 · Answer 1 · answered Jan 31 '17 at 18:28

47

If you are using ES6 module (like in ReactNative) the correct way is to use the import statement:

import _ from 'lodash'

let text = _.isUndefined(route.rightButtonText) ? 'Default value' : route.rightButtonText;

answered Jan 31 '17 at 18:28

Hubert Perron

3,022
5
34
28

I used this for importing Underscore in React and it worked. – mukesh.kumar Jun 22 '19 at 18:04
5

I think we should import only neccessary methods like this: ``` import { flatten, union } from 'lodash'; ``` – Robin Huy Oct 03 '20 at 10:10

score 15 · Answer 2 · answered Aug 26 '15 at 12:43

15

I am using lodash (underscore with more stuff) like this:

Add this to the package.json "lodash": "^3.10.0"
In the component you need just write: var _ = require('lodash')

And you are set.

Here is more info on lodash if you need lodash

answered Aug 26 '15 at 12:43

eyal83

3,893
3
19
30

score 8 · Answer 3 · edited Apr 26 '16 at 03:10

8

To run require successfully in React, this is what I did:

Install underscore.
```
npm install underscore
```

Define a dependency in package.json

"dependencies": {
  "react": "^0.13.*",
  "underscore": "^1.8.3"
}

Define underscore inside the function where you want to use it.

render() { 
  let _ = require('underscore')
  let buttonStyle = _.clone(button);
}

edited Apr 26 '16 at 03:10

Mogsdad

44,709
21
151
275

answered Apr 26 '16 at 03:02

Asif Shiraz

864
1
12
27

11

Don't quote me on that, but I don't think it's very wise to do a require on the render method. – Maximo Dominguez Apr 10 '17 at 17:14

Ilake Chang · Answer 4 · 2015-08-27T00:51:12.337

1

I found the issue, the problem is

I do NOT use it

I just require it and try to test it in console.

When I use it in somewhere, like _.map([1, 2, 3], function(num){ return num * 3; }) anywhere.

Then I test it in console, it does require the library this time.

I am not sure this is npm require or react-native behavior ?

When you don't use a library, even you require it, it won't be required.

edited Aug 27 '15 at 00:51

answered Aug 27 '15 at 00:20

Ilake Chang

1,542
1
14
19

How to require underscore in react-native

4 Answers4

Linked