It looks like this plugin does not work on Windows because of slash direction in the file paths. This regex check always returns because the paths it's sent look like ...node_modules\lodash\_getLength.js. If I modify the code to replace backslashes in resource with forward slashes, the plugin works as expected.

Greetings! Thanks for new way to optimise web bundles!

And.. first problem, I tried to add plugin to existing project and got no such file errors:

ERROR in ./~/lodash/fp/filter.js
Module build failed: Error: ENOENT: no such file or directory, open '/path-to-project/node_modules/lodash/fp/_arrayFilter.js'
    at Error (native)
 @ ./path-to-file.js 68:15-42

ERROR in ./~/lodash/fp/map.js
Module build failed: Error: ENOENT: no such file or directory, open '/path-to-project/node_modules/lodash/fp/_arrayMap.js'
    at Error (native)
 @./path-to-file.js 88:12-36

ERROR in ./~/lodash/_MapCache.js
Module build failed: Error: ENOENT: no such file or directory, open '/path-to-project/node_modules/lodash/_ListCache.js'
    at Error (native)
 @ ./~/lodash/_SetCache.js 1:15-37

ERROR in ./~/lodash/_Stack.js
Module build failed: Error: ENOENT: no such file or directory, open '/path-to-project/node_modules/lodash/_ListCache.js'
    at Error (native)
 @ ./~/lodash/_baseIsEqualDeep.js 1:12-31

It's happened only in one file where i've used lodash/fp

const composeAddress = fp.flow(fp.map(fp.trim), fp.compact, fp.join(' '));
const cleanupCoordinates = fp.flow(fp.map(fp.toNumber), fp.filter(fp.isFinite));
const cleanupSearchQuery = fp.flow(fp.trim, fp.toLower);

And with this methods:

_.isEqual

  [797] ./~/lodash/isEqual.js 984 bytes {0} [built]
  [798] ./~/lodash/_baseIsEqual.js 1.13 kB {0} [built]
  [799] ./~/lodash/_baseIsEqualDeep.js 3 kB {0} [built] [1 error]

_.union

  [648] ./~/lodash/union.js 750 bytes {0} [built]
  [649] ./~/lodash/_baseFlatten.js 1.2 kB {0} [built]
  [650] ./~/lodash/_arrayPush.js 437 bytes {0} [built]
  [651] ./~/lodash/_isFlattenable.js 489 bytes {0} [built]
  [652] ./~/lodash/isArguments.js 1.29 kB {0} [built]
  [653] ./~/lodash/isArrayLikeObject.js 742 bytes {0} [built]
  [654] ./~/lodash/isArrayLike.js 875 bytes {0} [built]
  [655] ./~/lodash/_getLength.js 444 bytes {0} [built]
  [656] ./~/lodash/_baseProperty.js 351 bytes {0} [built]
  [657] ./~/lodash/isFunction.js 1.18 kB {0} [built]
  [658] ./~/lodash/isObject.js 727 bytes {0} [built]
  [659] ./~/lodash/isLength.js 808 bytes {0} [built]
  [660] ./~/lodash/_baseUniq.js 1.91 kB {0} [built]
  [661] ./~/lodash/_SetCache.js 508 bytes {0} [built] [1 error]

But after I removed all relations to lodash/fp i still had this problems

ERROR in ./~/lodash/_MapCache.js
Module build failed: Error: ENOENT: no such file or directory, open '/path-to-project/node_modules/lodash/_ListCache.js'
    at Error (native)
 @ ./~/lodash/_SetCache.js 1:15-37

ERROR in ./~/lodash/_Stack.js
Module build failed: Error: ENOENT: no such file or directory, open '/path-to-project/node_modules/lodash/_ListCache.js'
    at Error (native)
 @ ./~/lodash/_baseIsEqualDeep.js 1:12-31

Here my configurations:

package.json (removed all non webpack/babel or production libs):

{
  "devDependencies": {
    "autoprefixer": "6.3.6",
    "babel-cli": "6.8.0",
    "babel-core": "6.8.0",
    "babel-eslint": "6.0.4",
    "babel-loader": "6.2.4",
    "babel-plugin-add-module-exports": "0.2.0",
    "babel-plugin-lodash": "3.1.0",
    "babel-plugin-react-transform": "2.0.2",
    "babel-plugin-transform-class-properties": "6.8.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-plugin-transform-es2015-classes": "6.8.0",
    "babel-plugin-transform-es3-member-expression-literals": "6.8.0",
    "babel-plugin-transform-es3-property-literals": "6.8.0",
    "babel-plugin-transform-flow-strip-types": "6.8.0",
    "babel-plugin-transform-node-env-inline": "6.8.0",
    "babel-plugin-transform-runtime": "6.8.0",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-0": "6.5.0",
    "babel-register": "6.8.0",
    "babel-runtime": "6.6.1",
    "clean-webpack-plugin": "0.1.9",
    "css-loader": "0.23.1",
    "file-loader": "0.8.5",
    "html-webpack-plugin": "2.16.1",
    "json-loader": "0.5.4",
    "less": "2.6.1",
    "less-loader": "2.2.3",
    "lodash-webpack-plugin": "0.1.1",
    "postcss": "5.0.21",
    "postcss-loader": "0.9.1",
    "source-map-support": "0.4.0",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "1.13.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "dependencies": {
    "lodash": "4.11.2"
  }
}

webpack.config.js

const webpack = require('webpack');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
    context: __dirname,

    entry: './src/index.js',

    output: {
        path: DIST_DIR_PATH,
        publicPath: '/' + DIST_DIR_NAME + '/',

        filename: '[hash]-bundle.js',
        chunkFilename: '[chunkhash]-bundle.js'
    },

    postcss: function () {
        return [
            autoprefixer({
                browsers: [
                    'Firefox > 20',
                    'last 3 version'
                ]
            })
        ];
    },

    module: {
        loaders: [
            {test: /\.html$/, loader: 'html'},
            {test: /\.json$/, loader: 'json'},
            {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000&minetype=application/font-woff'},
            {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url?limit=10000'},
            {test: /\.(jpe?g|png|gif)$/i, loader: 'url?limit=10000'},
            {test: /\.css$/, include: /flexboxgrid/, loader: 'style!css?modules'},
            {test: /\.js$/, loader: 'babel', exclude: /node_modules/},
            {test: /\.css$/, exclude: /flexboxgrid/, loaders: ['style', 'css', 'postcss']},          
            {test: /\.less/, exclude: /flexboxgrid/, loaders: ['style', 'css', 'postcss', 'less']}
        ]
    },

    amd: {
        jQuery: true
    },

    plugins: [
        new LodashModuleReplacementPlugin(),
        new IgnorePlugin(new RegExp('^(vertx)$')),
        new LimitChunkCountPlugin({
            maxChunks: 20
        }),
        new HtmlWebpackPlugin({
            inject: 'body',
            title: 'Wing',
            template: './assets/index.ejs',
            favicon: './assets/favicon.ico'
        }),

        new DedupePlugin(),
        new CleanWebpackPlugin('*', {
            root: DIST_DIR_PATH
        }),

        new UglifyJsPlugin({
            sourceMap: false,
            compress: {
                warnings: false
            },
            output: {
                comments: false
            }
        }),
        new DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        })
    ]
};

.babelrc

{
  "presets": [
    "stage-0",
    "es2015",
    "react"
  ],
  "plugins": [
    "lodash",
    "add-module-exports",
    "transform-class-properties",
    "transform-decorators-legacy",

    "transform-runtime",
    "transform-node-env-inline",

    "transform-es3-property-literals",
    "transform-es3-member-expression-literals",

    [
      "transform-es2015-classes",
      {
        "loose": true
      }
    ]
  ]
}

Without this plugin enabled

        import _ from 'lodash'
        var test = _.map({'a':1, 'b':2}, function(value, key) {
                    return { key: key, value: value };
                })

test is
[{key: a, value: 1}, {key: b, value: 2}]

With this plugin enabled, the same code, test is
undefined

I tried enabling some goodies as per below config, but same undefined result:

        new LodashModuleReplacementPlugin({
            flattening: true,
            paths: true
            })

My Babel preset is

            // BABEL
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/,                
                query: {
                    plugins: ['lodash'],
                    presets: ['react', 'es2015', 'stage-1']
                }   
            },

Perhaps something else I need to be doing?

Thank you.

i cannot use babel-loader because some reasons babel/babel-loader#259

i tried to use this lib just as a webpack plugin, but i could not see any changes.
is there a way i use this lib just as a gulp plugin?
i find the plugin, like uglify for webpack is not as well as it works as gulp plugin.

I've enabled collections in webpack as follows:

        new LodashModuleReplacementPlugin({
            collections: true
            })

The below tho fails with an error, only when the plugin is enabled:

        const test = [ 
            {key: 'a', value: 1}, 
            {key: 'b', value: 2} ]
        _.map(test2)

Error is:

TypeError: iteratee is not a function
    at arrayMap (webpack:///./~/lodash/_arrayMap.js?:16:21)
    at map (webpack:///./~/lodash/map.js?:50:10)

Error points to this block of code:

function arrayMap(array, iteratee) {
  var index = -1,
      length = array == null ? 0 : array.length,
      result = Array(length);

  while (++index < length) {
    result[index] = iteratee(array[index], index, array);   <----- Error here
  }
  return result;
}

Is there something additional I need to add to config in Webpack? I've adding in exotics and guards but the error remains.

I was just curious if there was a version of this plugin that supports lodash v3. Unfortunately due to other dependencies my project is forced to remain on v3.10.1 of lodash for the time being, but I was hoping if possible to make use of this plugin. It's a shot in the dark, totally understand if you only support the much more well-structured v4 of lodash.

I'm not sure where this should go, so I'm just going to post it in both repos & link them, but I'm having an issue where using lodash-webpack-plugin for my production build is breaking some internal code in the victory.js victory-chart library.

Specifically, it's in the scale.js helper utility and is failing on line 71:

var axisData = allData.map(accessor);

The error in the chrome console is:

scale.js:71 Uncaught TypeError: r.map is not a function

And this was while using a horizontal stack chart made up of VictoryStack & VictoryBar components.

To be clear, if I comment out usage of the lodash webpack plugin and rebuild, all works as it should. I'm not sure what exactly the issue is, but let me know if I can provide any extra detail you might need.

FormidableLabs/victory-chart#289

Also, what about the babel plugin producing that list of methods and somehow passing it to the webpack plugin so that the lodash build is as tight as possible?

And if that's not possible, perhaps just leaving it on your file system for manually pasting it as a param to the webpack plugin, if that's the best we can do.

I know I asked this of myself when creating plugins, and the convention seems to be a suffix, not prefix:

https://www.npmjs.com/search?q=webpack-plugin

Also followed by the author:

https://github.com/webpack?utf8=%E2%9C%93&query=plugin

Granted, my typo'd, mobile tweet didn't come across too convincingly :)

https://twitter.com/ericclemmons/status/725886813491986432

I'm using this with my webpack configuration and have found that at times my code doesn't work as expected. This is obviously because I did not enable one of the options that this plugin exposes. Would it possible to find a list which would essentially be something like:

1. sortBy, uniqBy, etc. requires flattening
2. map, etc. requires collections

Thanks!

I'm using lodash/forEach in a project and it works perfectly. When I tried to use this plugin the code was behaving incorrectly with no errors being output.

After some debugging I reached to the issue, basically (dunno why) instead of getting the forEach function the plugin was replacing it by the arrayEach. Since I was passing an object to the supposed forEach function, it wasn't looping. Any idea why?

Hello

I'm workign on a typescript project using lodash. We would love to use the webpack-plugin to decrease vendor bundle size but I can't figure how to make it work.
here is a version of my webpack config file

  var webpackOptions = {
    entry: {
      app: './src/app/index.module.ts',
      vendor: ["lodash"],
    },
    resolve: { extensions: ['', '.ts'] }, 
    module: {
      preLoaders: [{ test: /\.ts$/, exclude: /node_modules/, loader: 'tslint-loader'}],
      loaders: [{
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ng-annotate',
      }, {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader:  'ts-loader',
        query: {
          'plugins': ['lodash']
        }
      }]
    },
    plugins: [
      new webpack.webpack.DefinePlugin({
        '__DEV__': JSON.stringify(process.env.NODE_ENV !== 'production'),
        'process.env': {
          'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }
      }),
      new LodashModuleReplacementPlugin,
      new webpack.webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
    ],
    output: { filename: 'index.module.js' }
  };

in typescript we import the module using the following syntax

import {forEach, assign} from 'lodash';

the emitted vendor.bundle.jsseems to contains the complete lodash lib...
I guess I'm doing something wrong, but I can't figure what
thanks for you help.

Hey there, great plugin, thanks! When I do the following in my code

_.find(users, {'active': true});

I get Uncaught TypeError: predicate is not a function

Everything works when I convert to a function, eg:

_.find(users, o => o.active);

Is this expected, and if so, are you planning on adding support for shorthand?

Thanks!

I always had my lodash imports explicitly, like

import _ from 'lodash';

and it worked fine.

Recently I've tried to move this into webpack.ProvidePlugin

new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery',
	_: 'lodash'
})

and instead of ~60KBs of lodash bundle, now I have it ~500, meaning the cherry-picking is not applied.

Would be very nice it this could be fixed.

After upgrading my project to use lodash-webpack-plugin, I started getting test failures related to _.get and _.has.

I set up a branch if you want to have a look. You can find run instructions below CONTRIBUTING.md.

Hi,

What happens with the lodash find function with this package? Since it throws the following error when I try to use it predicate is not a function.

When I change the webpack configuration by adding "shorthands": true, it does not throw the error anymore. But doesn't seem to work as it should neither, since the result is undefined.

When I log the values before the _.find function call in my script, and use those values in the console on the same page it threw me the error before. It works as it should, and gives the expected result.

Would like to know what the shorthands parameter actually stands for as well, that isn't really clear to me :-)

I have a couple of deps that import e.g. lodash.flatten. I use resolve.alias to map those to e.g. lodash/flatten, and that works great (provided you use lodash and not lodash-es. I also map lodash-es to lodash).

However, it is tedious to find and write all the names. Can this plugin put an automatic resolver in place for lodash.*? I don't seem to find a way to do it from webpack configuration.

PS: the issue when aliasing lodash to lodash-es is that the methods then become ES6 exports and that breaks ES5 code. I tried using exports-loader to no avail, and after measuring with webpack bundle analyzer it turns out that the minified code of lodash vs lodash-es is actually smaller despite being larger unminified, so now I alias lodash-es to lodash.

Hi,

I stumbled accross a wierd issue using lodash webpack plugin and i hope you could help me understand what's wrong. Here is the scenario :
Considering 2 files exporting a list of consts :

//const1.js
export const CONFIG1 = { foo: 'bar', foooo: 'baaaaar' }

//const2.js
export const CONFIG2 = { bar: 'foo', baar: 'foooo' }

And a third file merging their values :

import * as const1 from './const1';
import * as const2 from './const2';
import _ from 'lodash';

//This can be done with a simple merge but that's just to use a merge inside a reduce
let accumulated = _.reduce({const1, const2}, (result, value, key) => (_.merge(result, value)), {});

export default accumulated;

When i'm using webpack to bundle this code, the output is different if i enable lodash-webpack-plugin and when i don't.
Running the following code with the plugin :

import globals from './global';

console.log(globals);

The output is : {} which is not what i expect

If i disable the plugin and run the code again the output is :

{ CONFIG1: { foo: 'bar', foooo: 'baaaaar' },
  CONFIG2: { bar: 'foo', baar: 'foooo' } }

which is what i expect.

I use the following config files :

//webpack.config
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: path.join(__dirname, '/index.js'),

  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js'
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },
  target: 'electron-renderer',
  module: {
    loaders: [
            {
                test: /\.jsx?$/,
                use: ['babel-loader'],
                exclude: [path.resolve(__dirname, 'node_modules')]
            }
        ]
  },

  plugins: [
    new LodashModuleReplacementPlugin()
  ]
};

//package.json
{
  "name": "lodashtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node dist/bundle.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-lodash": "^3.2.11",
    "babel-preset-es2015": "^6.24.1",
    "lodash": "^4.17.4",
    "lodash-webpack-plugin": "^0.11.4",
    "webpack": "^3.5.6"
  }
}

//.babelrc
{
    "presets": [
      "es2015"
    ],
    "plugins": [
      "lodash"
    ]
  }

I'm not an expert in lodash or webpack and discovered this by not using lodash functions the right way i guess, but still this seems very much wierd to me. Can someone give me some feedback on this please ? Cheers !

I'm not sure if it is lodash's issue (probably not), but adding
new LodashModuleReplacementPlugin
to webpack plugins, causes redux-persist stopping write it's data to localStorage.

While this plugin has a very noticeable impact on package size, it was a surprise that it broke my build.

I would expect default settings to not break builds :)

So I suppose this is at least a request for better documenting what the feature removal does, and what features need to be enabled to make things work.

For example, it took me a while before figuring out that I needed to add shorthands: true to make string-as-an-iteratee work. I don't really understand what the other features do, a somewhat longer explanation would be appreciated.

Hi,
I've two questions about this plugin:

• I saw, that this has a dependency to some babel packages. But in the code, there is no babel used. Is there a reason?
• The example shows the LodashModuleReplacementPlugin and the babel-loader configuration where lodash is defined as plugin. Is this the only way to use the lodash-webpack-plugin? I tried this in a small test without babel but with typescript. So the LodashModuleReplacementPlugin in the plugins array is the only reference. But this seems not to work.... The artifacts are still about 540KB.

Thanks!

Is there a browserify alternative for this plugin?

I have some trouble to get the plugin working on common chunks.

The embed bundle is well optimized, but on the other hand, the vendors chunk bundle is not.
Changing the order between LodashModuleReplacement and CommonsChunk has no effect.
Any ideas ?

{
  entry: {
    client: '../src/client.js',
    embed: '../src/app/embed.js',
    ...
  }
  ...
  plugins: [
     new LodashModuleReplacementPlugin(),
     new webpack.optimize.CommonsChunkPlugin({
        name: 'vendors',
        chunks: ['client'],
        minChunks(module, count) {
          return count >= 2 || (module.context && module.context.indexOf('node_modules') !== -1);
        },
     }),
     ...
  ]
}

The module Lodash is even bigger in vendors.bundle actually.

Finally!
So you want to use es6 version of lodash and webpack's tree-shaking?
Or some manual approach?

My webpack config looks like below.The problem is : _.get({"a":{"b":["c","d”]}},"a.b",[]),it returns [].
After i remove the config, it works right.

===================
1.
//var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
2.
rules: [
{
test: /.(jsx|js)?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
//plugins: ['lodash'],
3.
plugins: [
//new LodashModuleReplacementPlugin,

Not much to add on top of the question above. :)

I just want to make sure I'm getting the optimal benefit from this great plugin.

Pre-plugin, bundled size for lodash was ~1.04mb. After applying plugin with default options, I'm at 612.54 KB which still seems pretty large.

Is this reasonable and what's expected? If so, would you mind adding a note to the README with some basic details about the size savings?

Thanks!!

Hi! 👋

You may remember from https://twitter.com/ericclemmons/status/821827334319771648?s=09 that I ran into issues before with this plugin.

It's working fairly well now, but I found the original problem:

lodash

startCase("howdy-there")
// Howdy There

lodash + webpack-lodash-plugin

startCase("howdy-there")
// HowdyThere

Adding unicode: true resolves it.

Is this the expected behavior?

Unrelated, I thought I'd share the positive impact this plugin currently has from our internal project:

With lodash-webpack-plugin, the lodash example went from 53.1 kB to 7.23 kB.
For widgets.js this takes us from 171 kB to 124 kB (46.8 kB to 36.5kB gzipped).

Hi!
Seems like _.reduce is mapped to arrayReduce, which removes its ability to reduce objects as well?

Using babel-plugin-lodash my reduce call is turned into:

And when I add lodash-webpack-plugin into the mix it's turned into:

Is this a bug or am I doing something wrong?

0.11.0 is the latest npm release: https://www.npmjs.com/package/lodash-webpack-plugin

_.union([1,2], [2,3]) returns [1,2] (actually always the first argument) unless flattening is enabled. The solution is to write _.uniq(_.concat([1,2],[2,3])) or opt in to flattening options.

I wonder what's the best solution here, as the link between flattening and union is not immediate and the _.union is just not doing its work by default. Maybe include that in the table of opt-ins that _.union needs flattening?

With this plugin enabled:

import omit from 'lodash/omit'
omit({'a-b':1}, 'a-b')
{'a-b': 1}

Without this plugin enabled:

import omit from 'lodash/omit'
omit({'a-b':1}, 'a-b')
{}

I tried disabling all the features but it still didn't fix the issue. It's possible I have some flaw in my setup, I'm not sure. I haven't noticed any other oddities with lodash.

Note: omit is only broken for keys with hyphens (maybe other characters, haven't tested).

Current versions:

• lodash: 4.17.4
• lodash-webpack-plugin: 0.10.7
• babel-plugin-lodash: 3.2.11

Any ideas?

_.property seems not work when shorthands was enabled, however, it works when paths was enabled, that's what I have found, which is different from README.md

Env:
[email protected]
[email protected]
[email protected]
[email protected]

We're having an issue where the lodash-webpack-plugin is binding CastArray as SetCache in our webpack.

e.g.

webpack --entry ./test/lodash-workaround.js --output-filename testBundle.js


// snippits from testBundle.js



  var SetCache = __webpack_require__(12),
[TRUNCATED]
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
[TRUNCATED]
        function castArray() {
          if (!arguments.length) {
            return [];
          }
          var value = arguments[0];
          return isArray(value) ? value : [value];
        }

        module.exports = castArray;

example webpack.config.js

// example webpack.config.js
import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'
function getConfig(options) {
  const { uglify, devtool, sourceMaps, output, externals, jsExtraLoader, ...restOptions } = options
  options = restOptions

  const plugins = [
 new LodashModuleReplacementPlugin({
      shorthands: true,
      cloning: true,
      collections: true,
      flattening: true,
      paths: true,
      memoizing: true,
      deburring: true,
      unicode: true,
    }),

version info

cat node_modules/lodash-webpack-plugin/package.json|grep -i version
  "_nodeVersion": "4.7.2",
  "_npmVersion": "2.15.11",
  "version": "0.11.0"

I've got this issue with the minified code:

Uncaught TypeError: t is not a function

and after bisecting the recently changed code it looks like the commit that introduces it is the added lodash-webpack-plugin and bumping lodash from 4.11.2 to 4.12.0.

Here is the exceprt from the console:

Any idea what this can be?

Webpack config:

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
	resolve: {
		alias: {
			'lodash': 'lodash-es'
		}
	},
	entry: [ './index' ],
	output: {
		filename: '[name].js'
	},
	plugins: [
		new LodashModuleReplacementPlugin,
	]
};

index.js

import _ from 'lodash';
document.write(_.padStart(1, 2, '0'));

Versions:

• lodash-es: 4.17.4
• lodash-webpack-plugin: 0.11.0
• webpack: 2.2.1

Actual output:
1

Expected output:
01

Hello, I have some interesting problem with your plugin, when i use it:

 new LodashModuleReplacementPlugin()

and then i use lodash.each

import {each} from 'lodash';
 each({a:1, b: 2}, (value, key) => {
        console.log('doesn\'t work')
    });

Each doesn't work correct, could you help me with this problem?

I am using flow to compose functions. 0.8.0 broke the flow function because of baseFlatten.

Since it doesn't seem obvious to me that flow must include flattening, it should enable it internally.

Hi,

I am using this module with react-google-maps, but i am getting this error in console when accessing application. can someone help to fix this issue.

_createFlow.js?a8a2:31 Uncaught TypeError: funcs.reverse is not a function
at eval (eval at (client_bundle_btf.js:5935), :33:13)
at enhanceElement (eval at (client_bundle_btf.js:575), :173:34)
at eval (eval at (client_bundle_btf.js:5575), :198:102)
at Object. (client_bundle_btf.js:5575)
at webpack_require (common.js:53)
at eval (eval at (client_bundle_btf.js:5683), :16:18)
at Object. (client_bundle_btf.js:5683)
at webpack_require (common.js:53)
at eval (eval at (client_bundle_btf.js:6548), :11:24)
at Object. (client_bundle_btf.js:6548)
(anonymous) @ _createFlow.js?a8a2:31
enhanceElement @ enhanceElement.js?feca:171
(anonymous) @ GoogleMap.js?0b57:196
(anonymous) @ client_bundle_btf.js:5575
webpack_require @ common.js:53
(anonymous) @ index.js?bd01:16
(anonymous) @ client_bundle_btf.js:5683
webpack_require @ common.js:53
(anonymous) @ prod-fas-map.js?6b88:3
(anonymous) @ client_bundle_btf.js:6548
webpack_require @ common.js:53
(anonymous) @ prod-fas-map-container.js?8ccd:3
(anonymous) @ client_bundle_btf.js:6536
webpack_require @ common.js:53
(anonymous) @ prod-fas.js?fc3b:11
(anonymous) @ client_bundle_btf.js:6596
webpack_require @ common.js:53
(anonymous) @ vpd-btf.js?6a6e:12
(anonymous) @ client_bundle_btf.js:6620
webpack_require @ common.js:53
(anonymous) @ ClientEntryBTF.js?f0f7:6
(anonymous) @ client_bundle_btf.js:4854
webpack_require @ common.js:53
(anonymous) @ client_bundle_btf.js:6766
webpack_require @ common.js:53
webpackJsonpCallback @ common.js:24
(anonymous) @ client_bundle_btf.js:1

Regards
Muthu

This is mainly a complain that is was not obvious - by readings the docs - that this plugin is actually totally risky. I mean everybody wants to have smaller builds - that's an easy sell - but this plugin is breaking in hundreds of places in our applications because I figured out - probably too late - that this is changing the behavior of "get" to not handling deep objects anymore - making it pretty useless overall.

I think it should made much more clear - probably also on the safer "babel-plugin-lodash" - that this is not just a plugin for making smaller builds but that the price is that it changes behavior of code from the original source code and that this might break code in production.

Because of the "compression" nature of this plugin we only used it for our production builds - like Uglify - and this was probably the worst decision yet. I figure I trusted the name "lodash" for super stability, rich test suites, etc.

Could be a lodash bug, when sets aren't included and an array with LARGE_ARRAY_SIZE is given.

_.uniq(new Array(200).fill(1))

TypeError: seen.push is not a function
    at baseUniq (_baseUniq.js:64)
    at uniq (uniq.js:23)
    at Array.uniq (uniq.js:6)

It looks like _.pick now depends on _.set, even for shallow paths.

With paths set:

> _.pick({abcd: 1}, ['abcd']);
Object {abcd: 1}

Without:

> _.pick({abcd: 1}, ['abcd']);
Object {a: {b: {c: {d: 1}}}}

"lodash": "^4.17.4",
"babel-plugin-lodash": "^3.2.11",
"lodash-webpack-plugin": "^0.11.2",

According to lodash's documentation, the second parameter of .sortBy should be either a function or a array of function.

Arguments

• collection (Array|Object): The collection to iterate over.
• [iteratees=[_.identity]] (...(Function|Function[])): The iteratees to sort by.

But after applying this plugin, the below fails:

import { sortBy } from 'lodash';
sortBy([ 3, 2, 5, 1 ], i => i);

while the below still works:

import { sortBy } from 'lodash';
sortBy([ 3, 2, 5, 1 ], [ i => i ]);

Hello,

It makes an error when I use import findIndex from 'lodash/findIndex' with lodash-webpack-plugin，the console shows that “Uncaught TypeError: predicate is not a function(…)“，the error can be located to baseFindIndex。

Thanks very much！

When using this plugin:
includes('abcdefghijklmnop', 'fgh') returns false
without the plugin, I get the correct result: true.

I created a minimal example here: https://github.com/dotch/lodash-webpack-plugin-bug

I tried this plugin and its working great. However I was wondering if there's a way this plugin can be configured to remove only unused methods!? I find it really inconvenient to manually set which feature-set I want! Also, developers might start using a feature-set which we opted-out of and end-up spending hours figuring out what's wrong until they realise that its getting removed by this plugin.

I haven't dig deep yet, but just wanted to ask if its possible to detect only used functions and remove everything else! This might also save some extra space in cases where I use say only get but not set, so set should be removed until I use it.

Did I make any sense?

In testing this on a project already using the lodash bundle plugin, something is causing the final output to break on me, throwing this error:

TypeError: predicate is not a function at baseFindIndex (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:7055:10) at findIndex (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:7028:11)
at http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:7141:18
at VCache.VArrayDirtyCompare [as cmpFn] (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:14083:36)
at VCache.render (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:14035:56)
at renderThunk (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:12764:46)
at handleThunk (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:12747:22)
at thunks (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:12370:18)
at walk (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:12249:10)
at diff (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:12236:6)
at InspireDOM.renderNodes (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:12049:53)
at InspireDOM.applyChanges (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:11036:19)
at http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:5696:41
at initializePromise (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:7816:8)
at new Promise (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:8228:34)
at TreeNode.expand (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:5683:21)
at TreeNode.toggleCollapse (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:6536:46)
at HTMLAnchorElement.onclick (http://127.0.0.1/inspire-tree/dist/inspire-tree-bundled.js:11711:31

When compiled without this new plugin, everything works as expected.

A paste of the compiled output file:
http://pastebin.com/LwJ3DT4L

I'm having problems with lodash fp.

This works as expected if I don't use lodash-webpack-plugin:

import { flow, keyBy, mapValues } from 'lodash/fp';

const mappedPackages = flow(
  keyBy(pkg => pkg.namespace),
  mapValues(pkg => pkg.name)
)(packages);

But if I use it, it doesn't work, it just returns the original array.

This is the config I am using:

new LodashModuleReplacementPlugin({ currying: true }),

If I don't use currying: true I get an error, which is expected. Using currying I just get the same array I input to the flow function.

I just fixed an issue while using redux-form v6 where partialRight seemed to be behaving like partial until I reenabled curry support.

While the "fix" makes sense, I thought the plugin would process the require call and enable it automatically.
This is the compiled required of partialRight which seemed to be causing the issue.
var _partialRight2 = require('lodash/partialRight');

While this plugin and the babel plugin are very nice, I am not sure about what the "normal" user of different libraries is expected to do. Right now we see dependency variations in our build where a lot of them are related to lodash.

Three different kinds seem to produce a lot of duplication/redundancy right now:

• Lodash Classic Build: https://www.npmjs.com/package/lodash
• Lodash ES Build: https://www.npmjs.com/package/lodash-es
• Lodash Single Packages: e.g. lodash.merge

Problem is a typical project consists of own dependencies and third party dependencies. A very prominent example right now might be redux which itself uses both lodash and lodash-es. Our code uses the normal lodash. And some third party dependencies also use variations of the same code.

Compared to other libraries lodash is published in all these variants and a normal webpack is unable to identify common parts.

Is there anything like this being worked on as part of the plugin? Otherwise lodash itself should probably deprecate the es-build and single packages and instead should suggest using the normal build + the webpack/babel plugins.