Graph are not drawn in nuxt3

[murawakimitsuhiro]

I'm trying to use d3-graphviz with nuxt3.
Here is the code I wrote.

<script setup lang="ts">
import * as d3 from 'd3'
import { onMounted, ref } from 'vue';
import { Graphviz, graphviz } from 'd3-graphviz';

const graphSvg = ref<HTMLDivElement>();
let graph: Graphviz<any, any, any, any>;

const render = () => {
  graph = graphviz(graphSvg.value as HTMLDivElement, {
    useWorker: false,
    width: 1000,
  })
      .dot(`digraph {a -> b}`)
      .render()
}

onMounted(async () => {
  render()

  setTimeout(() => {
    console.log('mounted rendered', graph)
  }, 3000)

  graph.onerror((errorMessage) => {
    console.log('graph vis error', errorMessage)
  })
});
</script>

<template>
  <div class="graph" ref="graphSvg" />
</template>

<style scoped>
.graph {
  min-height: 500px;
}
</style>

Here is what I have confirmed.

• The defined variables are correctly assigned values and the console.log result after render returns the following
  • mounted rendered Graphviz {_options: {…}, _selection: Selection, _active: false, _busy: true, _jobs: Array(0), …}
• I put a breakpoint in node_modules/d3-graphviz/src/redner.js:16 in Chrome DevTools, and it stops here
  • 
• It worked fine when I wrote other d3 methods within my render function (e.g., drawing a simple straight line)

  d3.select(graphSvg.value as HTMLDivElement)
    .append("svg")
    .append("line")
    .attr("x1", 20)
    .attr("y1", 5)
    .attr("x2", 300)
    .attr("y2", 200)
    .attr("stroke", "red")

I am concerned that _busy in the graphViz object is still true after waiting 3 seconds.
Is this correct behavior?

Sorry if nuxt3 support should not be discussed here.

Thanks for your help.

[magjac]

No that's not the correct behavior. It's hard to tell what's wrong without being able to run it myself. If you can provide a complete example, I'll be happy to investigate. I haven't used nuxt3 or Vue so I would need detailed instruction how to set it up. Any output on the console would also be useful.

If you haven't loaded @hpcc-js/wasm or set up the script tag you should start with that.

[murawakimitsuhiro]

Thank you for the advice.
I was able to get it to work partly by using the script tag to load the @hpcc-js/wasm.

Partially, I mean that it does not work well when I start nuxt (i.e. yarn dev ), but I confirmed that it works well by following these steps.
・Comment out the render function and start the server with yarn dev.
・After that, uncomment render and perform hot reload, and the graph is drawn.

console texts

wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
graphvizlib.js:9 falling back to ArrayBuffer instantiation
failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
graphvizlib.js:9 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
    at abort (graphvizlib.js:9:7145)
graphvizlib.js:9 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.
    at abort (graphvizlib.js:9:7145)

I believe this is a problem with the way@hpcc-js/wasm is loaded on nuxt3.
Therefore, I don't think it is appropriate to treat this as an issue for this project. If so, please close it.

(Also, I have published the code used in this project here. ⇨ https://github.com/murawakimitsuhiro/exgraph/blob/e076eb5cd285063cd78c4cc68dd31c0b6cbe8fca/components/DotGraph.vue)

[murawakimitsuhiro]

I have solved this problem.
Finally, I was able to get it to work by referencing your angular project and specifying the wasmFolder.
https://github.com/magjac/d3-graphviz-angular

my code is here.
https://github.com/murawakimitsuhiro/exgraph/blob/main/components/DotGraph.vue

I guess it seems to occur when some module bundler is used.
Should I add this to the README and create a PR?
Also, do you have any good solutions?

[nicolidin]

@murawakimitsuhiro I've got the same issue with vue3 (not nuxt) and your code fixed it, thanks !

[magjac]

@murawakimitsuhiro @nicolidin Thanks for the feedback.