magjac / d3-graphviz

Graphviz DOT rendering and animated transitions using D3
BSD 3-Clause "New" or "Revised" License
1.68k stars 103 forks source link

RuntimeError: abort(CompileError: WebAssembly.instantiate() #176

Closed plc-dev closed 3 years ago

plc-dev commented 3 years ago

I had some issues getting this package to run in Vue.js.

I managed to get it to work with the workaround from #152, but the suggested solutions seem very brittle (manually copying or creating symlinks). Has there been found any solution to this issue that is platformagnostic?

Also had a similar issue to #94, which I managed to resolve by not importing the d3 package at all and just use

import * as d3 from "d3-graphviz";
...
...
d3.graphviz("#graphX", {useWorker: false}).renderDot(`strict digraph {
        node [shape="box" style="filled"]
        c -> d}`
);

Is it intended to be used that way, or am I ignorantly introducing another source of error by doing so?

Sorry for asking two questions in one issue, but they seemed somewhat related (using frameworks like Vue/React), so I figured one issue might suffice.

magjac commented 3 years ago

Has there been found any solution to this issue that is platformagnostic?

No. I'm using it on Linux only, but I guess it's possible to do something platform agnostic in your package.json.

Is it intended to be used that way, or am I ignorantly introducing another source of error by doing so?

I don't know. This is how I do it in https://github.com/magjac/graphviz-visual-editor/blob/master/src/Graph.js#L6:

import { select as d3_select} from 'd3-selection';
import { selectAll as d3_selectAll} from 'd3-selection';
import { transition as d3_transition} from 'd3-transition';
import { zoomIdentity as d3_zoomIdentity} from 'd3-zoom';
import { zoomTransform as d3_zoomTransform} from 'd3-zoom';
import { event as d3_event} from 'd3-selection';
import { mouse as d3_mouse} from 'd3-selection';
import 'd3-graphviz';
plc-dev commented 3 years ago

Thanks for the fast response.

No. I'm using it on Linux only, but I guess it's possible to do something platform agnostic in your package.json.

True, actually hadn't thought about that tbh. Guess that's what I am resorting to:

const fs = require("fs");

const from = "./node_modules/d3-graphviz/node_modules/@hpcc-js/wasm/dist/";
const to = "./public/js/";
const target = "graphvizlib.wasm"

if (!fs.existsSync(to)) fs.mkdirSync(to);
fs.copyFileSync(from + target, to + target)

and call that setup script before starting the dev server via:

"scripts": {
    ...
    "serve": "node setup.js && vue-cli-service serve",
    ...
  },

Not pretty, but seems to work for now. ¯\(ツ)