TypeError when calling the BpmnVisualization constructor in a Angular 11 project

[13322211021]

import { BpmnVisualization } from 'bpmn-visualization';

const bpmnVisualization = new BpmnVisualization({ container: 'bpmn-container' });

When execute this line will get this error:
TypeError: bpmn_visualization__WEBPACK_IMPORTED_MODULE_4__.BpmnVisualization is not a constructor

I have tried several versions, but got the same.
I use it in the angular 11.

[tbouffard]

Hi
I cannot try to reproduce today but your issue seems related to the webpack configuration:

TypeError: bpmn_visualization__WEBPACK_IMPORTED_MODULE_4__.BpmnVisualization is not a constructor

Today, when using webpack, you must configure the mainFields
See https://github.com/process-analytics/bpmn-visualization-examples/blob/v0.26.1/projects/javascript-vanilla-with-webpack/webpack.config.js#L30

AFAIK, this is required because bpmn-visualization defines a browser attribute in its package.json and the value relates to a file that cannot be used by webpack. By default, webpack first uses the "browser" attribute when doing dependency resolution. So, that's why we must override the webpack default configuration to make it uses the module bundle for instance.
We also saw the issue when using parcel.

I plan to work on this topic in the next weeks. In the meantime, you will have to do custom webpack configuration.

Notice that we have also planned (for a long time 😺) to test the angular integration. I will try to work on it if we are stuck. See process-analytics/bpmn-visualization-examples#20

Please let me know if this answer helps or if you need more information.

[13322211021]

Thanks for your quick reply. Yes, it helps.
But, I didn't make changes to the webpack.config.js since I used the Angular CLI, and I'm not sure if it would impact other modules. I changed the bpmn-visualization's package.json in the node_modules, set the browser, main and module attributes' values to "dist/bpmn-visualization.esm.js" like below:

This works for me. In addition, I have to used the bpmn-visualization 0.20.0 since the Angular11 only can compile the module which depends on the typescript lower than 4.5. 😭
Hope you can support Angular as soon as possible😺. I think that will attract more users.

[tbouffard]

Thanks for the feedback, it gives me some ideas for improvement.
I have noticed the potential issue with recent TypeScript versions. I will review it and see what we can do about this problem.

It's now clear that we need examples to test various Angular integrations. I will try to work on this topic next week.

[tbouffard]

@13322211021 I have a question about

I have to used the bpmn-visualization 0.20.0 since the Angular11 only can compile the module which depends on the typescript lower than 4.5.

Can you please provide the error you have with a recent version of bpmn-visualization and tells me the version of Typescript you use when getting the error?
This will help me troubleshooting.

[tbouffard]

@13322211021 I have worked on the topic and I have now a clearer vision of the situation

• the browser field in package.json will be fixed in the next upcoming 0.26.2 release [BUG] The browser field in package.json is incorrect #2228. Version 0.26.2 has been released on 2022-09-19
• [email protected] requires at least TypeScript 4.5. I guess this is why you have type errors in your Angular 11 project, if you use TypeScript 4.4 for instance. [FEAT] Downlevel the lowest TS version needed to integrate bpmn-visualization #2252 will handle this and I hope we release a version including the fix before the end of September.

I have also worked on an example that integrates bpmn-visualization in an Angular 14 project and it works (as far as I use a version that fixes the "browser" field 😄). I don't plan to do tests with previous Angular versions: the issue with Angular 11 is only related to the TypeScript version required by bpmn-visualization.

I will keep you posted when I have news.

[tbouffard]

ℹ️ Here are the news 👀

The Angular 14 example is under review (process-analytics/bpmn-visualization-examples#411), and there is no integration problem with version 0.27.1 which is the latest available version.
As mentioned few weeks ago, the issue with Angular 11 is only caused by bpmn-visualization types that requires TS 4.5. This is now explicit in both the README (#2251) in version 0.26.2 and type definitions (#2272) in version 0.27.0.

We have found several ways to lower the minimum TS version, which should soon be TS 4.1 at the most or possibly a lower version. Discussions are ongoing on the subject (#2231 (comment)).
As the downlevel process of the TS version requires preparatory work, I can't guarantee that the change will be in the next version but we are actively working on it.

Thanks for you patience

[tbouffard]

Hi @13322211021, the issue is now fixed in the master branch 😌
The changes will be available in the next release that will be available in a few days. bpmn-visualization will now require TypeScript 4.0 or greater to work.

[tbouffard]

[email protected] was released today and it includes the changes.

[13322211021]

It's amazing that you can give me continuous feedback. Thanks for your fantastic work!👍👍