Error: package with prefix <undefined> already defined

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)

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.

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.

Hey @Stephen_Newport. I know you posted this issue 2 years ago but would you still happen to have the code to show the solution? We have the same issue now and tried to replicate what you put above however it didn’t work :frowning:

If you could that would be great!