How to use bpmn-js with latest lodash 4.17.4


#1

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.


#2

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

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


#3

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.


#4

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.


#5

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


#6

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


#7

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.


#8

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