Heap is not a constructor

Issue type

Bug report

Environment info

• Cytoscape.js version : 3.2.1
• Browser/Node.js & version : 8.4.0
• webpack: 3.5.5

Current (buggy) behaviour

error: Heap is not a constructor probably Webpack can’t load the heap package.

Relevant tsconfig.json

"compilerOptions": {
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "skipLibCheck": true,
        "noEmit": true,
        "target": "es2015",
        "module": "commonjs",
        "noImplicitAny": false,
        "sourceMap": true,
        "inlineSourceMap": false,
        "inlineSources": false,
        "preserveConstEnums": true,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "jsx": "preserve",
        "lib": [
            "dom",
            "es5",
            "es6",
            "es7",
            "es2017.object"
        ],
        "allowSyntheticDefaultImports": true
    },

Works fine with v3.1.5. Probably related to https://github.com/cytoscape/cytoscape.js/issues/1858

[agaurav]

I very much appreciate you putting extra effort to have this solved but for now I have made peace with using the bundled version 😃

While it sure seems to be an issue with my tsconfig (or may be webpack config), but I am unable to identify it. I tried various combination for compiler option target,module & allowSyntheticDefaultImports, allowJs & isolatedModules but none seems to be able to work. The imported Heap variable seems to be an empty object,when editing the dist file as

var Heap = __webpack_require__(8);
console.log(Heap);

The peer dependencies are working for all other of packages (almost all of them having react,d3 & lodash as one). I also have both "@types/heap": "^0.2.28" & "heap": "^0.2.6" installed. Thanks to bundles version it’s not an issues for me as heap is quite a small lib.

Again thanks for your help.

For anyone else facing same issue with webpack & typescript, a workaround is to have the following in your webpack config.

alias: { 
    cytoscape: path.join(process.cwd(), 'node_modules/cytoscape/dist/cytoscape.js'),
},

[maxkfranz]

Cytoscape is not a Typescript library. It’s a JS library. You have to configure your build properly to accommodate for that.

You have a problem with transitive dependencies. Check your typings. Check that you have typings for the npm dependencies of cytoscape@3.2.

I recommend you read the docs carefully for your tooling:

• Typescript
• browserify tsify
• webpack ts-loader

It works for me with just a single line:

browserify main.ts -p [ tsify --allowJs ] > bundle.js

For reference:

// main.ts

import * as cytoscape from 'cytoscape';

let cy = cytoscape();

cy.add([
  { data: { id: 'foo' } },
  { data: { id: 'bar' } },
  { data: { source: 'foo', target: 'bar' } }
]);

console.log( 'num eles', cy.elements().size() );

console.log( 'dijkstra return obj', cy.elements().dijkstra({ root: '#foo' }) );

And if we run the bundle, it works just fine:

$ node bundle.js
num eles 3
dijkstra return obj { distanceTo: [Function: distanceTo],
  pathTo: [Function: pathTo] }