Using graphviz in ES6 module

user_589823 0
Viewed 105

When I try to load graphviz in an ES6 module, I get errors about .wasm



(index):284          GET https://anki.wip/build/graphvizlib.wasm 404

__webpack_require__.O @ chunk loaded:23
(anonymous) @ app.scss?8f59:1
webpackJsonpCallback @ jsonp chunk loading:72
(anonymous) @ app.js:1
index.js:184 Aborted(both async and sync fetching of the wasm failed)
abort @ index.js:184
getBinary @ index.js:184

My set up is pretty simple, although I've tried many variations of this

yarn add d3-graphviz
# installs d3-graphviz@4.1.1

Then in my js file

import { graphviz }  from 'd3-graphviz';
graphviz('#test')
    .fade(false)
    .renderDot('digraph {a -> b}');

I have read, and re-read, the issue on github at https://github.com/magjac/d3-graphviz/issues/152, and various issues related to running it with Vue and Angular, but still can't figure it out.

I've tried loading the unpkg in my HTML file, but then my javascript module doesn't have access to graphviz.

    <script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
    <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
    <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
    <script src="//d3js.org/d3.v5.min.js"></script>

Any ideas?

d3.js graphviz
1 Answers

Basically you need to treat the wasm file like any "static asset" (like a png or jpeg). Based on where the browser is looking for the file by default, the quickest solution is to simply copy the wasm file to your public folder.

On the @hpcc-js/wasm side take a look at the "wasmFolder" documentation here: https://github.com/hpcc-systems/hpcc-js-wasm#wasmFolder as it will let you override the default location.

user_3768550
Related