_emscripten_bind_Graphviz_Graphviz_2.apply is not a function

[kevanslumin]

I get this error _emscripten_bind_Graphviz_Graphviz_2.apply is not a function when running the basic graphviz('#graph', false) .renderDot('digraph {a -> b}') .logEvents(true) .onerror((err) => { console.log(err); }); demo. The error throws at layoutStart. Has anyone seen that before?

I am using it with Angular, and Angular uses webpack under the hood.

[magjac]

What version of d3-graphviz? What version of dependencies? How do you serve the application? Please provide a complete example and I will look into it.

[kevanslumin]

d3-graphviz 4.1.1 and hpcc-js/wasm 1.15.3, but i've tried several older versions of that one as well.

here is network-diagram.component.ts:

import { BaseComponent } from '@a3/core';
import * as d3Graphviz from 'd3-graphviz';
//import * as d3 from 'd3';
//import { wasmFolder } from '@hpcc-js/wasm';
//import { wasmBinary } from '@hpcc-js/wasm';
//const __hpcc_wasmFolder = '/dist/client';

@Component({
    selector: 'app-network-diagram',
    templateUrl: './network-diagram.component.html',
})
export class NetworkDiagramComponent extends BaseComponent {
    constructor() {
        super();
    }

    ngOnInit(): void {
        //        wasmFolder('/dist/client');
        console.log('before createSvg');
        this.createSvg();
        console.log('after createsvg');
        //this.drawDiagram(this.data);
    }

    private createSvg() {
        console.log('before graphviz');
        d3Graphviz
            .graphviz('#graph', false)
            .renderDot('digraph  {a -> b}')
            .logEvents(true)
            .onerror((err) => {
                console.log(err);
            });
        console.log('after graphviz');
    }
}

Here is network-diagram.component.html:

<div id="graph"></div>

I build with ng build and in angular.json in the assets section i have these lines to make sure the wasm gets copied into the dir with all of the js:

                            {
                                "glob": "graphvizlib.wasm",
                                "input": "node_modules/@hpcc-js/wasm/dist",
                                "output": "/"
                            },
                            {
                                "glob": "expatlib.wasm",
                                "input": "node_modules/@hpcc-js/wasm/dist",
                                "output": "/"
                            },
                            {
                                "glob": "index.min.js",
                                "input": "node_modules/@hpcc-js/wasm/dist",
                                "output": "/"
                            }

Here is the console log:

core.mjs:24889 Angular is running in development mode. Call enableProdMode() to enable production mode.
network-diagram.component.ts:20 before createSvg
network-diagram.component.ts:27 before graphviz
network-diagram.component.ts:35 after graphviz
network-diagram.component.ts:22 after createsvg
d3-graphviz.js:1597 Event  0 initEnd              495 
d3-graphviz.js:1597 Event  1 start                  1     0
d3-graphviz.js:1597 Event  2 layoutStart            0     0
network-diagram.component.ts:33 _emscripten_bind_Graphviz_Graphviz_2.apply is not a function

Thanks!

[magjac]

I think you must use the same version of @hpcc-js/wasm as d3-graphviz uses in it's package.json:

$ grep @hpcc-js/wasm package.json 
    "@hpcc-js/wasm": "1.12.8",

[kevanslumin]

I still get the same error, I appreciate the help though.

[magjac]

Sorry, I don't know what's wrong, but I think it's something Angular specific. I think Stack Overflow is a better place to ask for help. Possibly could https://github.com/magjac/d3-graphviz-angular/pull/13 help you too.

[kevanslumin]

I had hpcc-js/wasm as a dependency in my project and so the final bundled js had the module included twice, and I think the two wasmTables were colliding. I removed it as a dependency from my project so that only the one include by d3-graphviz ended up in the final js, and then it worked, thanks.