Import cytoscape.js as ESM module

user_3209523 0
Viewed 538

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

cytoscape.js angular
1 Answers

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"
            ]
user_17144470
Related