Error: package with prefix <undefined> already defined


#1

I upgraded my working version from Vue-cli 2.x to 3 and now I can’t load the modeler if the modelerExtensions includes “camunda: camundaModdleDescriptor” . If I remove the camunda moddle references it works, but without the camunda extensions (as you would expect).

My code roughly looks like:

import * as camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'
import * as korioBPMNModdleDescriptor from './KorioBPMNModdleDescriptor.json'
export function getModeler (modelerType) {
      var modeler = new BpmnModeler({
        container: '#canvas',
        moddleExtensions: {
          korio: korioBPMNModdleDescriptor,
          camunda: camundaModdleDescriptor // required for camunda:XXX properties in the panel     }
})

The modeler does not load and the error in the console is:

vue.runtime.esm.js?2b0e:1737 Error: package with prefix <undefined> already defined
    at ensureAvailable (registry.js?e42b:210)
    at Registry.registerPackage (registry.js?e42b:52)
    at forEach (index.esm.js?87f2:162)
    at new Registry (registry.js?e42b:32)
    at BpmnModdle.Moddle (moddle.js?649c:44)
    at new BpmnModdle (bpmn-moddle.js?1640:25)
    at new __webpack_exports__.default (simple.js?ccff:24)
    at Modeler.Viewer._createModdle (Viewer.js?88eb:465)
    at Modeler._createModdle (Modeler.js?7024:157)
    at Modeler.Viewer (Viewer.js?88eb:120)

#2

Having done a stack trace I can now see that the moddle extensions that I manually load are now coming into the package array as “module” and that the prefix field is not being found by registry.js in this specific call:

ensureAvailable(pkgMap, pkg, 'prefix')

As a result, the prefix shows as “undefined” and, therefore, only one of the two moddle extensions will load. I assume that this is caused by a Webpack upgrade, but I’m really not a javascript expert and have no clue how to fix it. I took a screenshot of the variables in scope. Attached.


#3

Fixed. In case anyone else uses Webpack 4 and pulls in custom Moddle extensions, including Camunda extensions as simple JSON.

I’m not sure if this is the best way to fix this problem, but I finally found an explanation for why simply importing the Camunda json Moddle extension was a problem. For details on this breaking change in Webpack 4, see this link: https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655

The fix:

I had to move the camunda.json file out of node_modules and into my project source directory, rename the file type to .js and export the camunda Moddle as a variable that I called “camundaExtensions”. Next, I imported it as below:

This didn’t work:
import * as camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

Copying camunda.json from the node-module directory, changing the camunda.json to camunda.js, wrapping it in a var as an object and then exporting the object and importing it, as below, fixed my problem:
import {camundaExtensions} from './camunda'

Obviously copying files out of node_modules and changing them is a really bad practice but I could think of no other solution.

Hope this helps someone in need.