search

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

Cannot read property 'graphvizVersion' of undefined #224

Closed lnicola closed 2 years ago

lnicola commented 2 years ago

Hello! I contribute to a VS Code extension that uses d3-graphviz for one of its features. While trying to upgrade the dependencies, including d3-graphviz 4.0.0 to 4.1.0, I noticed that the feature broke with the error in the issue title.

I don't really have experience with the Node ecosystem, so it's quite likely that I messed something up. Perhaps you might have an idea?

See https://github.com/rust-analyzer/rust-analyzer/pull/11821 for more details. The relevant code is https://github.com/rust-analyzer/rust-analyzer/blob/deb5c14/editors/code/src/commands.ts#L485-L541.

magjac commented 2 years ago

I've supplied an answer in https://github.com/rust-analyzer/rust-analyzer/pull/11821. Let's continue the discussion there unless you find it's actually a bug in d3-graphviz.

arbipher commented 2 years ago

I also found this problem without any rust things.

I cloned the project and build and install it as the instructions.

I can hack to bypass the problem by changing src/graphvizx.js at around line 123. Then after rebuild I can see the graph in the example examples/basic-grow-entering-edges.html.

    this._graphvizVersion = "1.12.8";
    // hpccWasmGraphvizVersion().then(((version) => {
    //     this._graphvizVersion = version;
    // }).bind(this));

btw the original code works under my npm run test. There is # graphviz().graphvizVersion() return the Graphviz version. in the testing output.

magjac commented 2 years ago

I can now confirm that this is a bug in d3-graphviz. It seems that the new graphvizVersion() does not work when using a web worker. Here's a workaround:

diff --git a/examples/basic-grow-entering-edges.html b/examples/basic-grow-entering-edges.html
index b909a60..914967c 100644
--- a/examples/basic-grow-entering-edges.html
+++ b/examples/basic-grow-entering-edges.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8">
 <body>
 <script src="../node_modules/d3/dist/d3.js"></script>
-<script src="../node_modules/@hpcc-js/wasm/dist/index.js" type="javascript/worker"></script>
+<script src="../node_modules/@hpcc-js/wasm/dist/index.js"></script>
 <script src="../build/d3-graphviz.js"></script>
 <div id="graph" style="text-align: center;"></div>
 <script>
arbipher commented 2 years ago

I see. Some other examples with javascript/worker also have this problem though.

magjac commented 2 years ago

There's nothing wrong with the examples themselves. They're just exposing the underlying bug.

magjac commented 2 years ago

This issue is fixed in version 4.1.1.