Using lodash with stenciljs

Question

I am trying to import lodash into my stenciljs component. I have tried multiple ways and viewed many solutions regarding this but got no luck on this.

I have tried to import in the following ways:

import * as _ from 'lodash';
import _ from 'lodash';
import 'lodash';
import {_} from 'lodash';

None of them is working for me. First one does not throw any error but I am not able to use any function from lodash. Rest of the ways throw errors and the build fails.

Any help would be really appreciable.

Thanks in advance!!

score 3 · Accepted Answer · answered Dec 10 '18 at 10:04

Your import is fine. Stencil compiler is resolving your lodash function call as "undefined". Try to add lodash types in your project. It should resolve the function definitions at compile time.

yarn add -D  lodash @types/lodash

OR

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

score 3 · Answer 2 · answered Dec 15 '18 at 14:32

3

I suggest you to use lodash-es package as it is written using es6 modules, so stencil compiler will be able tree-shake stuff you need only

answered Dec 15 '18 at 14:32

Valikhan Akhmedov

961
1
10
14

Chilipote · Answer 3 · 2019-08-07T12:00:56.340

1

small tip but as @valikhan suggest , you should import only the packages you need as :

import _find from 'lodash/find'

In that case, only find module would be loaded , and not all the lodash library. Note that , if you are using deconstruction as import { find } from 'lodash/find', you will also include the entire lodash library while you don't actually need it.

edited Aug 07 '19 at 12:00

answered Jul 18 '19 at 12:16

Chilipote

1,037
1
8
30

1

I've just received a downvote on my comment, but don't understand why ? Could someone explain it to me please ? – Chilipote Jul 22 '19 at 12:08
It works. Although installation of `@types/lodash` allowed only to do `import _ from lodash`. – Mikhail Tulubaev Apr 03 '20 at 16:04

Using lodash with stenciljs

3 Answers3