How to use bpmn-js with latest lodash 4.17.4

I am using lodash 4.17.4 in my project. but after integration it is showing so many error like
Module not found: Error: Can’t resolve ‘lodash/collection/forEach’

Module not found: Error: Can’t resolve ‘lodash/object/assign’’
etc.

In general, that should not cause any issues for you?

What is your project setup? Which bundler do you use?

bpmn-js uses Lodash 3, Lodash 4 removed category names from module paths:

// in 3.10.1
var chunk = require('lodash/array/chunk');

// in 4.0.0
var chunk = require('lodash/chunk');

See changelog.

I think that’s the issue.

Yea, but how is it related? With a proper bundler it should be possible to use both, lodash 3 in bpmn-js and loadsh 4 in your application.

We are using webpack bundler with bable.js. can you please elaborate how to configure both the version?

Please provide us with a test case (GitHub project or something else) that allows us to reproduce the issue.

Hi,
Thanks for your reply. Here are the scenario. I am already using lodash@4.17.4 in my project now I have to add bpmn-js to my project when i am doing so “npm install bpmn-js --save” it is saying `:

-- UNMET PEER DEPENDENCY bpmn-js@0.20.5 +-- bpmn-moddle@0.14.0 | +-- **lodash@3.10.1** | +-- moddle@1.0.0 | |lodash@3.10.1
| -- moddle-xml@1.0.0 |lodash@3.10.1
±- diagram-js@0.19.3
| --**lodash@3.10.1** +-- diagram-js-direct-editing@0.17.1 |lodash@3.10.1
`-- lodash@3.10.1
after adding it manually when I am trying to build it it is showing numerous errors like:

ERROR in ./~/moddle/lib/registry.js
Module not found: Error: Can’t resolve 'lodash/object/assign’ in ‘/home/hrkumar/Amelia/ameliav3/ameliav3/amelia-admin-ui/node_modules/moddle/lib’
@ ./~/moddle/lib/registry.js 3:13-44
@ ./~/moddle/lib/moddle.js
@ ./~/moddle/index.js
@ ./~/bpmn-moddle/lib/bpmn-moddle.js
@ ./~/bpmn-moddle/lib/simple.js
@ ./~/bpmn-moddle/index.js
@ ./~/bpmn-js/lib/Viewer.js
@ ./~/bpmn-js/lib/Modeler.js
@ ./src/containers/processKnowledge/processDetails/ProcessDetailContainer.js
@ ./src/containers/main/AdminApp.js
@ ./src/index.js

ERROR in ./~/moddle/lib/registry.js
Module not found: Error: Can’t resolve 'lodash/collection/forEach’ in ‘/home/hrkumar/Amelia/ameliav3/ameliav3/amelia-admin-ui/node_modules/moddle/lib’
@ ./~/moddle/lib/registry.js 4:14-50
@ ./~/moddle/lib/moddle.js
@ ./~/moddle/index.js
@ ./~/bpmn-moddle/lib/bpmn-moddle.js
@ ./~/bpmn-moddle/lib/simple.js
@ ./~/bpmn-moddle/index.js
@ ./~/bpmn-js/lib/Viewer.js
@ ./~/bpmn-js/lib/Modeler.js
@ ./src/containers/processKnowledge/processDetails/ProcessDetailContainer.js
@ ./src/containers/main/AdminApp.js
@ ./src/index.js

ERROR in ./~/moddle/lib/descriptor-builder.js
Module not found: Error: Can’t resolve ‘lodash/object/pick’ in ‘/home/hrkumar/Amelia/ameliav3/ameliav3/amelia-admin-ui/node_modules/moddle/lib’
@ ./~/moddle/lib/descriptor-builder.js 3:11-40
@ ./~/moddle/lib/registry.js
@ ./~/moddle/lib/moddle.js
@ ./~/moddle/index.js
@ ./~/bpmn-moddle/lib/bpmn-moddle.js
@ ./~/bpmn-moddle/lib/simple.js
@ ./~/bpmn-moddle/index.js
@ ./~/bpmn-js/lib/Viewer.js
@ ./~/bpmn-js/lib/Modeler.js
@ ./src/containers/processKnowledge/processDetails/ProcessDetailContainer.js
@ ./src/containers/main/AdminApp.js
@ ./src/index.js

ERROR in ./~/moddle/lib/descriptor-builder.js
Module not found: Error: Can’t resolve 'lodash/object/assign’ in ‘/home/hrkumar/Amelia/ameliav3/ameliav3/amelia-admin-ui/node_modules/moddle/lib’
@ ./~/moddle/lib/descriptor-builder.js 4:13-44
@ ./~/moddle/lib/registry.js
@ ./~/moddle/lib/moddle.js
@ ./~/moddle/index.js
@ ./~/bpmn-moddle/lib/bpmn-moddle.js
@ ./~/bpmn-moddle/lib/simple.js
@ ./~/bpmn-moddle/index.js
@ ./~/bpmn-js/lib/Viewer.js
@ ./~/bpmn-js/lib/Modeler.js
@ ./src/containers/processKnowledge/processDetails/ProcessDetailContainer.js
@ ./src/containers/main/AdminApp.js
@ ./src/index.js

ERROR in ./~/moddle/lib/descriptor-builder.js
Module not found: Error: Can’t resolve ‘lodash/collection/forEach’ in ‘/home/hrkumar/Amelia/ameliav3/ameliav3/amelia-admin-ui/node_modules/moddle/lib’
@ ./~/moddle/lib/descriptor-builder.js 5:14-50
@ ./~/moddle/lib/registry.js
@ ./~/moddle/lib/moddle.js
@ ./~/moddle/index.js
@ ./~/bpmn-moddle/lib/bpmn-moddle.js
@ ./~/bpmn-moddle/lib/simple.js
@ ./~/bpmn-moddle/index.js
@ ./~/bpmn-js/lib/Viewer.js
@ ./~/bpmn-js/lib/Modeler.js
@ ./src/containers/processKnowledge/processDetails/ProcessDetailContainer.js
@ ./src/containers/main/AdminApp.js
@ ./src/index.js

clearly these issues are coming because lodash has change their directory structure e.g in lodash@3.x lodash/collection/forEach is lodash/forEach in lodash@4.x. Please help me. or is there any workaround to keep both version of lodash in npm. we are using webpack as packaging tool.

Please provide us with an example project that we can checkout in order to reproduce the bug. Thanks!