I developed a React component using Typescript that utilizes cytoscape (along with its typings) as a headless model. My goal is to turn this into an NPM package so it can be easily imported into other projects.
About my library:
- It functions correctly when I import cytoscape.js in my index.html as a static asset
- However, it fails when I try to
npm installmy component in a new ES6 app:
. This issue arises even though cytoscape gets automatically installed in node_modules when installing my component.Uncaught ReferenceError: cytoscape is not defined at new WbsLayout
Typescript Source Code
WbsLayout.tsx:
export class WbsLayout {
//...
public cy: Cy.Core;
constructor(graph: any, Options?: Options) {
this.cy = cytoscape({ // <-- Works or fails based on cases #1 and #2 mentioned above
headless: true,
elements: graph
});
//...
}
//...
}
It's worth noting that I do not have a
import cytoscape from 'cytoscape'Wbs.tsx:
A straightforward React component which receives the prop WbsLayout.
cytoscape's Typings (relevant excerpt only)
declare namespace Cy {
//...
interface Core { }
//...
interface Static {
(options?: Cy.CytoscapeOptions): Core;
(extensionName: string, foo: string, bar: any): Core;
version: string;
}
}
declare module "cytoscape" {
export = cytoscape;
}
declare var cytoscape: Cy.Static;
Webpack 2 Configuration
The files Wbs.tsx, WbsLayout.tsx, and others are bundled into @nodeject/wbs-react through Webpack 2:
(*webpack configuration*)tsconfig.json
(*tsconfig.json content*)New ES6 App Source Code
(*ES6 app code snippet*)