CODEWITHSUNDEEP
angularcytoscape.js
canbax
canbax

Reputation: 3856

Import cytoscape.js as ESM module

I'm using cytoscape.js in an Angular 10 application. The documentation of cytoscape.js says

To use Cytoscape.js in an ESM environment with npm (e.g. Webpack or Node.js with the ESM package): import cytoscape from 'cytoscape';

I import it like import cytoscape from 'cytoscape'; in my typescript file.

But I see warnings

CommonJS or AMD dependencies can cause optimization bailouts.

So I go to node_modules\cytoscape\dist folder. I see that there are many importable files.

enter image description here

I put console.log to each one of them. Then I see that I'm using cytoscape.cjs.js which means I'm using commonjs file.

I might copy cytoscape.esm.min.js and import it manually but is there a better way? It would be better to track all my dependencies from package.json

Upvotes: 3

Views: 1233

Answers (1)

Jelmer Jellema
Jelmer Jellema

Reputation: 1116

I googled for this a while ago and found out there is no support for typescript yet. So I just did the same import as you did and added cytoscape to angular.json: projects.yourprojectname.architect.build.options.allowedCommonJSDependencies like this:

 "allowedCommonJsDependencies": [
              "cytoscape",
              "cytoscape-popper",
              "lodash",
              "lodash/cloneDeep"
            ]

Upvotes: 1

Related Questions