Lodash export errors in Ionic2 RC0

I previously had my project building and running fine at Ionic2 beta 11. After following the instructions to update to rc0 (I used the “Copying your Project to a New Project method”) I have the following error when running ionic serve:
lodash.js does not export find

The import line I’m using in the offending file is:
import { find } from ‘lodash’;

As described in the instructions I installed the lodash types using this command:
npm install @types/lodash --save-dev --save-exact

Also as described in the instructions I ensured there is no typings.json file or typings directory.

It doesn’t matter which lodash method I try to use, I always get the same problem. Does anyone know what I’m doing wrong here?

Here’s my Ionic info
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.6.0
Xcode version: Xcode 8.0 Build version 8A218a

Hi, with the new RC you have to import lodash like this : import _ from "lodash"

There has been another topic for this problem :slight_smile:

Doh, I did search the forum for @types but found nothing.
Many thanks, it works fine now.

I can’t get Lodash to work at all.

I tried the following:

  1. import * as _ from “lodash”
  2. import _ from “lodash”

I’m getting errors like below during bundling:
[19:25:05] rollup: Export ‘get’ is not defined by ‘…/services/auth-service.js’
[19:25:05] rollup: Export ‘reverse’ is not defined by ‘…/products/products.js’
[19:25:05] rollup: Export ‘values’ is not defined by ‘…/products/products.js’

This is driving me nuts. I have been trying for the past 3 days and I still couldn’t find a solution.

I ran this to install lodash:
npm install @types/lodash --save --save-exact

make sure to install npm @types/lodash

edit: sorry, you did have types… lemme check mine

I don’t get any errors during compilation though.

Here are my dependencies

“dependencies”: {
"@ionic/storage": “1.0.3”,
"@types/crypto-js": “3.1.32”,
"@types/lodash": “4.14.36”,
“angularfire2”: “2.0.0-beta.5”,
“firebase”: “3.4.1”,
“ionic-angular”: “2.0.0-rc.0”,
“ionic-native”: “2.0.3”,
“ionicons”: “3.0.0”,
“ng2-translate”: “3.0.0”,
“swiper”: “3.3.1”
},
“devDependencies”: {
"@ionic/app-scripts": “0.0.23”,
"@types/request": “0.0.30”,
“typescript”: “2.0.3”
}

do you actually install the lodash library itself? you need both lodash and @types/lodash

I thought @types/lodash also pulls lodash. Here is my updated dependencies.

“dependencies”: {
"@ionic/storage": “1.0.3”,
“angularfire2”: “2.0.0-beta.5”,
“crypto-js”: “3.1.6”,
“firebase”: “3.4.1”,
“ionic-angular”: “2.0.0-rc.0”,
“ionic-native”: “2.0.3”,
“ionicons”: “3.0.0”,
“lodash”: “^4.16.3”,
“ng2-translate”: “3.0.0”,
“swiper”: “3.3.1”
},
“devDependencies”: {
"@ionic/app-scripts": “0.0.23”,
"@types/crypto-js": “3.1.32”,
"@types/lodash": “4.14.36”,
"@types/request": “0.0.30”,
“typescript”: “2.0.3”
}

But I still have the same problem. I looked at node_modules directory and I see all the packages are there.

I don’t have lodash in my dependencies but I do have @types/lodash in my devDependencies:
“dependencies”: {
“ionic-angular”: “^2.0.0-rc.0”,
“ionicons”: “^3.0.0”,
"@ionic/storage": “^1.0.3”,
“ionic-native”: “^2.0.3”
},
“devDependencies”: {
"@ionic/app-scripts": “^0.0.23”,
"@types/lodash": “4.14.36”,
"@types/moment": “2.13.0”,
“typescript”: “^2.0.3”
},

To import lodash in a ts file:
import _ from ‘lodash’;

To use lodash in a method
_.get( … );
_.reverse( … );
_.values( … )

@symphony86 and @julianmountford

I did everything mentioned in this thread but nothing worked for me.

Since I also need to get firebase to work I updated node_modules/@ionic/app-script/config/rollup.config.js as per the instructions here: https://playcode.org/getting-started-with-ionic-2-rc0-firebase-3-angularfire-2/

plugins: [
ngTemplate(),
// – CHANGES BELOW –
commonjs({
include: [
‘node_modules/rxjs/’,
'node_modules/angularfire2/
’,
‘node_modules/firebase/’,
'node_modules/@ionic/storage/
’,
‘node_modules/localforage/’,
'node_modules/lodash/

],
namedExports: {
‘node_modules/firebase/firebase.js’: [‘initializeApp’, ‘auth’, ‘database’],
‘node_modules/angularfire2/node_modules/firebase/firebase-browser.js’: [‘initializeApp’, ‘auth’, ‘database’]
}
}),
// – CHANGES END –
nodeResolve({
module: true,
jsnext: true,
main: true,
browser: true,
extensions: [’.js’]
})
]

Do you think this is causing trouble with lodash?

Don’t do this. Never touch anything under node_modules manually. npm will cause you pain over and over again. Read this for how to properly override config files.

1 Like

Did you ever get this to work? I am seeing the same issue.

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.2
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
Ionic App Scripts Version: 0.0.39
OS:
Node Version: v6.9.1

npm install @types/lodash --save-dev --save-exact
npm install typings --global
npm install lodash --save --global
typings install lodash --save

“dependencies”: {
"@angular/common": “2.1.1”,
"@angular/compiler": “2.1.1”,
"@angular/compiler-cli": “2.1.1”,
"@angular/core": “2.1.1”,
"@angular/forms": “2.1.1”,
"@angular/http": “2.1.1”,
"@angular/platform-browser": “2.1.1”,
"@angular/platform-browser-dynamic": “2.1.1”,
"@angular/platform-server": “2.1.1”,
"@ionic/storage": “1.1.6”,
"@types/lodash": “^4.14.38”,
“ionic-angular”: “2.0.0-rc.2”,
“ionic-native”: “2.2.3”,
“ionicons”: “3.0.0”,
“lodash”: “^4.16.6”,
“rxjs”: “5.0.0-beta.12”,
“zone.js”: “0.6.21”
},
“devDependencies”: {
"@ionic/app-scripts": “0.0.39”,
"@types/lodash": “4.14.38”,
“typescript”: “2.0.6”
},

Then I tried both of the following formats in my typescript file:

import * as _ from ‘lodash’;
import _ from ‘lodash’;

Both said: Cannot find module ‘lodash’

Try removing @types/lodash from your dependencies but keep it in your devDependencies like this:

  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.0.0-rc.2",
    "ionic-native": "^2.2.3",
    "ionicons": "^3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^0.0.39",
    "@types/lodash": "4.14.36",
    "@types/moment": "2.13.0",
    "typescript": "^2.0.6"
  },

To import lodash into a ts file:

import _ from 'lodash';

To use lodash in a method

_.get( ... );
_.reverse( ... );
_.values( ... );

For those who find this thread and are using Ionic 2.1.0 - you need to use this for lodash to work

npm install @types/lodash@ts2.0 --save-dev --save-exact

note the @ts2.0 - if you leave that off it installs ts2.1 which is not compatible yet

then

import * as _ from “lodash”

should work