添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

I noticed this in a project I'm working on. We do import chain from 'lodash/chain'; and we have webpack alias lodash to lodash-es . But when we run our Jest unit tests, we get and error that chain(...).groupBy is not a function

Not sure why, so I loaded up the node REPL and discovered this:

> $ 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.