How to Import Javascript File - cytoscape/cytoscape-edgehandles.js

Viewed 238

I have the following module in which I'm trying to add the cytoscape-edgehandles.js extension to my existing cytoscape-based project (trimmed unnecessary parts to illustrate the issue) -

    /* cytoscape import */
    import '../cytoscape/cytoscape.min.js';
    import '../cytoscape/cytoscape-edgehandles.js';

    import { CytoscapeStyle } from './cytoscape-defaults.js';

    function cytoContainer() {
        return document.getElementById("cy");
    }

    export class DiagramBuilder {
        /* other static methods here ... */

        static build(matrix, permutation) {
            let cy = new cytoscape({ 
                container: cytoContainer(),
                panningEnabled: false,
                autolock: true,
                style:CytoscapeStyle
            });
            /* other stuff here */
        }
    }

I'm following the guide from the Cytoscape team to import the cytoscape-edgehandles extension (repo here - https://github.com/cytoscape/cytoscape.js-edgehandles/blob/master/README.md#usage-instructions).

In their example, they indicate to import the edgehandles extension as follows -

import cytoscape from 'cytoscape';
import edgehandles from 'cytoscape-edgehandles';

cytoscape.use( edgehandles );

However if I copy the example verbatim, I receive the following error -

TypeError: Failed to resolve module specifier "cytoscape". Relative references must start with either "/", "./", or "../".

Furthermore, if I try to explicitly import edgehandles from cytoscape-edgehandles.js, like so -

/* cytoscape import */

import '../cytoscape/cytoscape.min.js';
import { edgehandles } from '../cytoscape/cytoscape-edgehandles.js';

I get the following error -

SyntaxError: The requested module '../cytoscape/cytoscape-edgehandles.js' does not provide an export named 'edgehandles'

Disclaimer - I'm a little out of my element working with cytoscape here. I'm able to create a new cytoscape instance and draw diagrams just fine, the issue began when I attempted to apply the edgehandles extension to allow for user-interaction with cytoscape edges.

0 Answers
Related