CODEWITHSUNDEEP
typescriptecmascript-6ionic2lodash
michael
michael

Reputation: 4547

Typescript do you import `lodash` -- with `es2015` modules?

It used to work, but now I changed my project to [email protected] with its new rollup and es2015 bundling/modules. I'm not able to get lodash correctly.

lodash is there, but in the wrong place -- the methods I need are in _.default

npm steps

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

javascript

import * as _ from "lodash";
console.log( Object.keys(_) )    // ["default", "__moduleExports"]
console.log(_.default.VERSION)   // 4.16.2

What's happening?

update

import _ from "lodash";  // imports as lodash, not _

// Chrome debugger console:
console.log(_)      // VM2037:1 Uncaught ReferenceError: _ is not defined(…)
console.log(lodash) // function
console.log(Object.keys(lodash))  // returns: VM2075:1 ["templateSettings", "after", "ary", "assign", ...]

update 2

Maybe it's something with Chrome Debugger + Rollup? I changed my code to import _ from "lodash"; and it works fine -- except in the debugger console...

    console.log(">>> _.keys(_): " + _.keys(_).slice(10, 20));
    // >>> _.keys(_): bindAll,bindKey,castArray,chain,chunk,compact,concat,cond,conforms,constant
    // and the _.sortBy() below works fine
    var sorted = _.sortBy(photos, function (o) {
        return o[sort.key];
    });

   // BUT, in the Chrome debugger (at breakpoint)
   console.log(_)      // VM2037:1 Uncaught ReferenceError: _ is not defined(…)

and in fact, when I look at the main.js and not the source map, I see signs of tree-shaking(?):

        console.log(">>> _.keys(_): " + lodash.keys(lodash).slice(10, 20));
        var sorted = lodash.sortBy(photos, function (o) {
            return o[sort.key];
        });

It seems like my problem is with the Chrome debug console, but I'm not sure how to address it...

Upvotes: 4

Views: 4745

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67336

The issue is that you are using import * as in your import. This will not select the defaults.

Use syntax that will import defaults instead:

import _ from "lodash"

Here is a link to the documentation

It seems that rollup attempts to tree-shake the bundle using the static imports. Therefore, it needs a lodash dependency that is ES6 as well. Try to install the lodash-es package instead and then import it:

import _ from "lodash-es"

Upvotes: 4

Related Questions