TypeError: this._createModdle is not a function error in production mode

[TimFoerster]

Hey, thanks for the example.

If I run everything in development mode / via ng serve it will work fine.
But if I run it in production mode I'll get the following stack error:

ERROR Error: Uncaught (in promise): TypeError: this._createModdle is not a function
TypeError: this._createModdle is not a function
    at Pr.Qa (16.bd2cd39fa5bb9b92e447.js:1)
    at new Pr (16.bd2cd39fa5bb9b92e447.js:1)
    at new t (16.bd2cd39fa5bb9b92e447.js:formatted:168)
   [...]

The error is thrown when the viewer gets init via private viewer: BpmnJS = new BpmnJS(); (Line 3 in stacktrace)

compiled code:

            function t() {
                this.viewer = new J.a,
                this.destroyed = !1
            }

I'm using a slight modificated version.

import { AfterContentInit, Component, ElementRef, Input, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';

import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.development.js';


@Component({
  selector: 'bpmn-diagram',
  templateUrl: './bpmn-diagram.component.html',
  styleUrls: ['./bpmn-diagram.component.scss']
})
export class BpmnDiagramComponent implements AfterContentInit, OnDestroy, OnChanges {

  private viewer: BpmnJS = new BpmnJS();

  private destroyed: Boolean = false;

  @ViewChild('ref') private el: ElementRef;

  @Input() private diagram: String;

  ngOnChanges(changes: SimpleChanges) {

    if ('diagram' in changes && changes['diagram'].currentValue) {
      this.openDiagram(changes['diagram'].currentValue);
    }
  }

  ngAfterContentInit(): void {
    this.viewer.attachTo(this.el.nativeElement);
  }

  ngOnDestroy(): void {
    this.viewer.destroy();

    this.destroyed = true;
  }


  openDiagram(xml: string): Promise<Object> {
    return new Promise((resolve, reject) => {
      if (this.destroyed) {
        return reject(new Error('component instance destroyed'));
      }

      this.viewer.importXML(xml, (err) => {

        if (err) {
          return reject(err);
        }

        return resolve({});
      });
    });
  }
}

with
<div id="canvas" #ref ></div>

I'll try to init the viewer later. But the deployment takes around 12hours.
I'll also try to get the source mapper in production mode, but do you had the same error once?

Edit:
it is this line which throws the error: https://github.com/bpmn-io/bpmn-js/blob/ce964e4182559237bea0594556239de0e4884a0d/lib/Viewer.js#L120

[nikku]

I'm not an expert in Angular and their setup. As far as I can tell the TerserPlugin (for minification) seems to do interesting things with the BPMN viewer, breaking the bundle down the line.

To workaround this, include our pre-packed distribution:

import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';

[nikku]

Steps to reproduce for future reference:

(cd bpmn-js-app && npm run build -- --prod)
(cd bpmn-js-app/dist/bpmn-js-app && npx asdf)

Then open localhost:5000 in your favourite browser.

[nikku]

Reported in forum, too.

[dangviettuan]

Any idea for this issue???

[nikku]

We are open for your suggestions.

[dangviettuan]

Hi guys! Please take a look on this narve/angular-bpmn#15

[RyanHow]

Hi guys! Please take a look on this narve/angular-bpmn#15

This one worked for me!

[nikku]

Applied the work around in 4e1f515. Thanks for the heads up.

[ealexhaywood]

For what it's worth, I can confirm there is an issue with bpmn-js and/or one of its dependencies with TerserPlugin for webpack. I tried directly importing the production.min.js file but that didn't work. I am using React.

I was able to exclude bpmn.io from being minified and it worked in a production build:

optimizations: {
  minimizer: [
    new TerserPlugin({
      exclude: /(?!bpmn-js|diagram-js|bpmn-moddle|moddle|moddle-xml|diagram-js-direct-editing|scroll-tabs)\/).*/
    })
  ]
}

[nikku]

Could you provide a minimal test case that shows how this is related to the terser plug-in, not angular specific optimizations?

[abarrak]

It's look like issue in the side effect flag.
angular/angular-cli#14750

Has anyone found solution?