> $ node
Welcome to Node.js v12.13.1.
Type ".help" for more information.
> var lodash = require('lodash');
undefined
> lodash.chain([]).groupBy
[Function]
> var { chain } = require('lodash');
undefined
> chain([]).groupBy
[Function]
> var chainDirect = require('lodash/chain');
undefined
> chainDirect([]).groupBy
undefined
seems var chain = require('lodash/chain');
is broken as you don't get any of the methods on the return object from chain()
, but you do if you require('lodash')
node v 12.13.1
lodash v 4.17.15
I checked the sourcecode : seem .chain()
was removed from project.
https://github.com/lodash/lodash/blob/4.17.15/lodash.js#L8737
Oh I see. I thought it was built from chain.js
file. seem the search function of github missed this.
seems var chain = require('lodash/chain');
is broken as you don't get any of the methods on the return object from chain()
, but you do if you require('lodash')
The lodash/xyz
modules are intentionally self-contained, so that the whole lodash library does not need to be loaded and executed, which is useful for cherry-picking individual functions. If you need to use the _.chain
functionality, you do need to load the whole lodash
library.
I am using chain import as below, but its not working.
import chain from 'lodash/chain';
If i do import complete lodash then it works, but i want to only import 'chain' which is not working.
i face with the same stuff
We also encountered this issue when migrating from lodash
to lodash-es
.
Before, we had this import:
import { chain } from 'lodash';
then we changed it to:
import { chain } from 'lodash-es';
There was no TypeScript error, therefore, we couldn’t spot the issue during compilation. We only noticed it at runtime.
The following ways of importing didn’t work either:
import _ from 'lodash-es';
import chain from 'lodash-es/chain';
The solution is to simply not use chain
. For example, if you have:
import { chain } from 'lodash';
const array = [];
const result = chain(array).groupBy((e) => e.name).map((elements, name) => {}).value();
you can do:
import { groupBy, map } from 'lodash-es';
const array = [];
const result = map(groupBy(array, (e) => e.name), (elements, name) => {});
or if you use a few functions, it could be more readable like this:
import { groupBy, map } from 'lodash-es';
const array = [];
const groups = groupBy(array, (e) => e.name);
const result = map(groups, (elements, name) => {});
To compliment the workaround by @andreypelykh above, for anyone else using lodash-es
which indeed has issues if you try to use _.chain(...).etc in production because of tree shaking.
If you are also importing methods using
import * as _ from 'lodash-es'
(Which still tree shakes unused methods, at least on my environment which is vite)
This might help if you are using eslint, to discourage it by the rest of your team, etc.
"no-restricted-syntax": [
"error",
"selector": "MemberExpression[object.name='_'][property.name='chain']",
"message": "`lodash-es` is meant to be tree-shaken, therefore `_.chain` causes issues in production. Do not use `_.chain`"
"selector": "CallExpression[callee.name='_']",
"message": "`lodash-es` is meant to be tree-shaken, therefore `_(value)` is equivalent of using `_.chain` which causes issues in production. Do not use `_.chain`"
You can also add a rule to implicitly disallow importing 'chain' from 'lodash-es' if you do not import _ using the wildcard notation,
"no-restricted-imports": [
"error", {
"paths": [{
"name": "lodash-es",
"importNames": ["chain"],
"message": "Do not use `_.chain`"
We also encountered this issue when migrating from lodash
to lodash-es
. Before, we had this import:
import { chain } from 'lodash';
then we changed it to:
import { chain } from 'lodash-es';
There was no TypeScript error, therefore, we couldn’t spot the issue during compilation. We only noticed it at runtime. The following ways of importing didn’t work either:
import _ from 'lodash-es';
import chain from 'lodash-es/chain';
The solution is to simply not use chain
. For example, if you have:
import { chain } from 'lodash';
const array = [];
const result = chain(array).groupBy((e) => e.name).map((elements, name) => {}).value();
you can do:
import { groupBy, map } from 'lodash-es';
const array = [];
const result = map(groupBy(array, (e) => e.name), (elements, name) => {});
or if you use a few functions, it could be more readable like this:
import { groupBy, map } from 'lodash-es';
const array = [];
const groups = groupBy(array, (e) => e.name);
const result = map(groups, (elements, name) => {});
Thanks for clarifying that!
FYI When we use lodash-es + Vite, we only see this issue during the build (rollup) because tree-shaking works differently than in esbuild which is used during development.