Import npm modules in client side React components

Question

In Meteor if I import lodash from npm like this in a react component and console.log "lodash" in the following locations it will always come up as undefined within the component. The same thing also happens with moment. I'm at my wits end because from what the docs say I thought this was possible. Is this possible, and if so is there something I'm missing here? Any help is much appreciated.

import React from 'react'
import lodash from 'lodash'

console.log(lodash) // lodash is found just fine

export default class SomeComponent extends React.Component {
    constructor(props) {
        super(props)
        this.someFunction = this.someFunction.bind(this)
    }
    someFunction() {
        console.log(lodash) // Throws error that lodash is undefined.
    }
}

Answer 1

I dropped your component into a meteor example, and it works fine.

e.g.

git clone https://github.com/meteor/simple-todos-react
cd simple-todos-react
npm i
npm i --save lodash
meteor

Then add the following to /imports/ui/App.jsx as in this diff:

 import { Tasks } from '../api/tasks.js';                        
 import Task from './Task.jsx';                                                  
 import AccountsUIWrapper from './AccountsUIWrapper.jsx';                        

+import lodash from 'lodash'                                                     
+console.log(lodash) // lodash is found just fine                                
+                                                                                
+export default class SomeComponent extends React.Component {                    
+    constructor(props) {                                                        
+        super(props)                                                            
+        this.someFunction = this.someFunction.bind(this)                        
+    }                                                                           
+    someFunction() {                                                            
+        console.log(lodash) // Throws error that lodash is undefined.      
+    }                                                                           
+    render() {                                                                  
+      this.someFunction()                                                       
+      return (                                                                  
+        <h2>SomeComponent</h2>                                                  
+      )                                                                         
+    }                                                                           
+}                                                                               

....

class App extends Component {
....
   render() {
     return (
       <div className="container">
         <header>
+          <SomeComponent />
           <h1>Todo List ({this.props.incompleteCount})</h1>

....

Open site in your browser, and check the console log: