bpmn-io/bpmn-js

Cannot use `bpmnjs.on` in module constructor when eagerly loaded

Open

#1,624 opened on Mar 23, 2022

View on GitHub
 (5 comments) (0 reactions) (0 assignees)JavaScript (7,739 stars) (1,249 forks)batch import
backlogbuggood first issuepr welcomespring cleaning

Description

Describe the Bug

Given I have a module of the following structure:

const module = {
  __init__: [ 'custom' ],
  custom: [ 'type', Custom ]
}

function Custom(bpmnjs) {
  bpmnjs.on('diagram.init' /** can be any event */, () => console.log('hello.world'))
}

when I load it to bpmn-js, I get an error similar to the one below:

TypeError: this.get is not a function
    at Modeler.BaseViewer.on (BaseViewer.js?b392:559:1)
    at new ExecutionPlatform (execution-platform.js?5062:41:1)

This is due to injector (and modules) being instantiated before Diagram#get API is defined, cf. https://github.com/bpmn-io/diagram-js/blob/develop/lib/Diagram.js#L139 The BaseViewer tries to get the EventBus but get is not available yet.

Steps to Reproduce

See above.

Expected Behavior

No error. We could move the API declaration to the root of the module and use Diagram.prototype.get, but I haven't tested that.

Environment

  • Browser: [e.g. IE 11, Chrome 69]
  • OS: [e.g. Windows 7]
  • Library version: [e.g. 2.0.0]

Contributor guide

Tech stack
javascript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Understanding of bpmn js module systemJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The bug occurs because `Diagram#get` is not yet defined when module constructors are called. To fix, examine the initialization order in `Diagram.js` (line 139) and `BaseViewer.js` (line 558-559). One possible approach is to move the API declaration (like `get`) earlier in the constructor or use `Diagram.prototype.get` before the injector is fully set up. Check linked PRs or comments for additional context.
Cannot use `bpmnjs.on` in module constructor when eagerly loaded · bpmn-io/bpmn-js#1624 | Good First Issue