d3-graphviz: RuntimeError: abort(CompileError: WebAssembly.instantiate():

Everytime I try to load d3-graphviz in my vuejs, I get the following console error and no graph is generated. Can someone please help. My fronted debugging skills are very poor. d3-@3.0.5

Uncaught (in promise) RuntimeError: abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.

Here is my vue component

<template>
  <div>
    <h3>from Component</h3>
    <div id="graph"></div>
  </div>
</template>

<script>
import * as d3 from 'd3';
import 'd3-graphviz';

export default {
  data() {
    return {
      code: 'digraph {a -> b}'
    };
  },
  mounted() {
    console.log(d3.select('#graph').graphviz("#graph").renderDot(this.code))
    d3.select('#graph').graphviz("#graph").renderDot(this.code);
  }
};
</script>

Screenshot from 2020-05-05 13-07-31

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 24 (21 by maintainers)

Commits related to this issue

Upgrade @hpcc-js/wasm version to 0.3.13 (Graphviz 2.44.0) Also pinned to that exact version as adviced by @GordonSmith in https://github.com/magjac/d3-graphviz/issues/152#issuecomment-625859265 — committed to magjac/d3-graphviz by magjac 4 years ago

Most upvoted comments

Even better is to create a symbolic link which you can commit to git and then never worry about again:

mkdir -p public/js
cd public/js
ln -s ../../node_modules/@hpcc-js/wasm/dist/graphvizlib.wasm .
git add graphvizlib.wasm 
git commit

magjac on May 8, 2020

If your pinned then you don’t have anything to do - but your essentially releasing two versions of your library - a bundled version (main) and an es6 version (jsnext).

The bundled version “probably” contains my wrapper versioned as of the time you built the bundle. While the JSNext version only references a local copy of @hpcc-js/wasm - which may well be newer (when using the hat). So there is potential for them to be out of sync in a “consumers” development environment.

(if you don’t bundle my wrapper then your probably ok).

Also I need to fix my auto versioning to be a bit stricter…

GordonSmith on May 9, 2020

Scratch that - I was fooled by Vue returning a “html” page in lieu of the missing wasm file - investigating more!

GordonSmith on May 8, 2020

@GordonSmith The problem we’re having with the development servers for both React and Vue.js is that they don’t seem to produce a build in the file system (at least I haven’t been able to find it). I guess they are in memory somewhere. In order to get this to work, one needs to figure out where to put the wasm before starting the server so that it finds it and incorporates it into the build.

You can try @avimehenwal’s test case yourself if you want to have a stab at it.

Your workaround of course works, but is very impractical for reasons you mention, but also since it requires Internet access which prohibits you to do development and testing offline.

magjac on May 8, 2020

Quick note on “wasmFolder” -

The wasm file typically needs to be loaded at runtime (on demand) similar to workers. The wrapping JS generated by emscripten includes some logic which attempts to identify the location of the “wrapper JS” and will assume that the wasm file is located in the same folder as it.

What happens is that the wrapper JS ends up getting moved and bundled by various tools (babel, typescript, webpack etc.), now the auto location code will still do its thing, but since its now in your dist folder, its going to assume the wasm file is in there also. Hence simply copying the wasm “resource” there is probably the simplest solution.

The wasmFodler is a way to specify an alternative location for the wasm (from the requesting html pages point of view).

IOW the following should work fine for most cases: wasmFolder(“https://cdn.jsdelivr.net/npm/@hpcc-js/wasm@0.3.13/dist”);

But you have to be carful that the wrapper version and wasm version match 100%

GordonSmith on May 8, 2020

Thank you for your comment, surprisingly works for me too in production build 😄 I will update this issue if I find out any leads. Thankyou again for your time 👍

avimehenwal on May 5, 2020

I don’t know how to do it with the development server but this works for the production build:

yarn build
cp -p node_modules/@hpcc-js/wasm/dist/graphvizlib.wasm dist/js
cd dist
http-server .

I did some experimenting with the wasmFolderbased on https://github.com/hpcc-systems/hpcc-js-wasm/issues/26 without any luck. Maybe you can figure it out. Please let me know.

magjac on May 5, 2020

yes, I accidentally selected and replaced graphviz 😢 Thanks for that

Here is the sample code I am trying to run, with instruction to deploy https://github.com/avimehenwal/graphviz-dot

Component File -> https://github.com/avimehenwal/graphviz-dot/blob/master/src/components/HelloWorld.vue

avimehenwal on May 5, 2020

BTW, I think you’ve accidentally destroyed parts of your comment above by deleting the word graphviz in several places when you edited it.

magjac on May 5, 2020