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>

[magjac]

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

[GordonSmith]

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…