Importing and using JavaScript modules in components

Hi, has only taken me so far I’m afraid.

I want to use but I need to make some customisations, in particular I need to call import cytoscape from 'cytoscape'; import fcose from 'cytoscape-fcose'; cytoscape.use(fcose); as per, and I imagine I need to do this before the Cytoscape addon creates its cytoscape instance. The Vaadin Addon has obtained the source of the Cytoscape JS library, not through @NpmPackage and imported it via a PolymerElement subclass. See and

I hoped to be able to do something similar to the following:

@Route(value = "cytoscape-demo")
public class CytoscapeDemo extends Div {

	public CytoscapeDemo() {
		add(new Cytoscape(););

And then in src/cytoscape-extensions.js:

import cytoscape from 'cytoscape';
import fcose from '../../node_modules/cytoscape-fcose/cytoscape-fcose.js';


But I haven’t been able to figure out how to reference either cytoscape that the addon includes, or my own @NpmPackage included extension from this import.

Thanks for any help that can be offered!


In this add-on, the library is copied in the resource folder:

That’s why you can’t find the annotation NpmPackage.

If you want to get the extension cytoscape-fcose you can do the same (copy/paste it in your resource folder) or add @NpmPackage(value = "cytoscape-fcose", version = "1.2.3").
It will download the cytoscape-fcose then you can import in your javascript file without …/…/node_modules, by default Vaadin will check this folder so it should be like the documentation of npm:

import cytoscape from 'cytoscape';
import fcose from 'cytoscape-fcose';
cytoscape.use( fcose );

I don’t know:

  • How you can tweak the add-on to add this extension
  • why the author didn’t use the npm package so you may have some problems.

Hi, thanks!

Indeed, the problem is how to reference a library that’s not been brought in via @NpmPackage. But it is brought in via @JsModule, which means that webpack is picking it up and including it in its vaadin-bundle*.js output I can see in the browser. I found this:


which precedes the eval that contains the library code. So I tried to reference the import with this path and still have problems.

Does that shine any light on how I should construct the import?

Thanks, Dan.

Of course, moments after posting I tried just @vaadin/flow-frontend/cytoscape/cytoscape.min.js and it worked!

Thanks for the help in any case,