Cytoscape.js as a Lit web component (in npm ESM project)

[rockhagen]

see UPDATE below in second post

How can I import cytoscape.js into my Lit npm ESM project?

actually this is a repost from Stackoverflow, but I did not get any response there :-(
Of course, if you can help me you'll get the credits also on Stackoverflow.

Versions I use are: npm: '8.1.4', node: '14.15.3' and current cytoscape.js npm package (3.20.0)

My package.json defines that I want to do ESM: "type": "module",

The cytoscape.js documentation states the following:

To install Cytoscape.js via npm: npm install cytoscape

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 followed the instructions. However, the import results in the error:

Uncaught SyntaxError: The requested module './../../node_modules/cytoscape/dist/cytoscape.cjs.js' does not provide an export named 'default'

Well, that is correct since the commonjs version was loaded. But in an ESM environment cytoscape.esm.js should be loaded instead of cytoscape.cjs.js. However, node_modules/cytoscape/package.json says to use the commonjs version: "main": "dist/cytoscape.cjs.js",

So I tried to import the ESM version directly in my code:

import cytoscape from './../../node_modules/cytoscape/dist/cytoscape.esm.js';

Cytoscape.js is now imported. However, I get the followup error in an dependent package:

Uncaught SyntaxError: The requested module './../../heap/index.js' does not provide an export named 'default' in line cytoscape.esm.js:24

I'm kind of stuck now. Other related questions did not help so far. I'll be happy for any suggestion or even solution. Thanks in advance!

[rockhagen]

UPDATE

To make things more clear I created a demo project. In that way it is really easy and fast for you to reproduce my issues.

Since I want to use cytoscape inside a webcomponent I use the Lit (as Polymer is deprecated). For that I just adopted the LIT javascript starter Kit. Please download my adopted demo code: lit-element-starter-js-main-cytoscape.zip

Changes I made in the starter kit

• added cytoscape: npm install cytoscape
• my-element.js : adopted to draw a simple network with cytoscape
• added cytoscape libs to folder /libs (see ISSUE 1)

How to use

• npm install
• npm run serve
• watch demo at: http://localhost:8001/dev

ISSUE 1: import problem

• import cytoscape from 'cytoscape'; fails; see detailed description in the post above
• workaround for now: added cytoscape lib directly (import cytoscape from "./libs/cytoscape.esm.min.js";)

ISSUE 2: CSS problem

• the css defined in the Lit component is not recognized by cytoscape (see my-element.js line 22 and 106)
• workaround: set div attributes explicitly (line 106): cy_div.setAttribute("style", "width:500px;height:1500px");
• best guess: Lit uses a shadow DOM and the css is not reflected in the 'normal' DOM that is used by cytoscape

ISSUE 3: Drag&Drop offset problem

• moving nodes via drag&drop works fine
• However, as soon as you scroll down the y-position is wrong. The wrong offset is exactly the scroll amount of pixels.
• best guess: again I think this is related to the shadow DOM; the scrolling is out of sync

So, is it impossible to use cytoscape inside a webcomponent? I had the same behaviour with Polymer.

Any help would be very much apprechiated. Please let me know if I can make things even more clear.