@hpcc-js/wasm: "ReferenceError: navigator is not defined"

Dev
#1

@schmoo2k I’m in the process of releasing a new version of d3-graphviz, but when I run the tests, I’m getting an error that I don’t understand:

RuntimeError: abort(ReferenceError: navigator is not defined). Build with -s ASSERTIONS=1 for more info.
at process.abort (/home/magjac/d3-graphviz/node_modules/@hpcc-js/wasm/dist/index.node.js:176:6623)
at process.emit (node:events:369:20)
at processEmit [as emit] (/home/magjac/d3-graphviz/node_modules/signal-exit/index.js:155:32)
at emit (node:internal/process/promises:135:22)
at processPromiseRejections (node:internal/process/promises:241:25)
at processTicksAndRejections (node:internal/process/task_queues:95:32)

It’s the same problem with any @hpcc-js/wasm version >= 1.0.0, but ok with 0.3.15.

I’ve tried nodejs version 10, 14 and 15 to no avail.

Full log at Travis CI - Test and Deploy Your Code with Confidence

Any ideas on what might be going on?

#2

For whatever reason, I’m getting the same error in d3-zoom version 1.7.4 or later:

ReferenceError: navigator is not defined
at SVGSVGElement.defaultTouchable (/home/magjac/d3-graphviz/node_modules/d3-zoom/dist/d3-zoom.js:107:3)
at Selection.selection_filter [as filter] (/home/magjac/d3-graphviz/node_modules/d3-selection/dist/d3-selection.js:106:38)
at zoom (/home/magjac/d3-graphviz/node_modules/d3-zoom/dist/d3-zoom.js:144:8)
at Selection.selection_call [as call] (/home/magjac/d3-graphviz/node_modules/d3-selection/dist/d3-selection.js:329:12)
at Graphviz.createZoomBehavior (/home/magjac/d3-graphviz/build/d3-graphviz.js:1:341631)
at Graphviz._render (/home/magjac/d3-graphviz/build/d3-graphviz.js:24:2089)
at Graphviz.render (/home/magjac/d3-graphviz/build/d3-graphviz.js:19:204)
at Graphviz. (/home/magjac/d3-graphviz/test/data-test.js:23:17)
at Dispatch.call (/home/magjac/d3-graphviz/node_modules/d3-dispatch/dist/d3-dispatch.js:64:72)
at /home/magjac/d3-graphviz/build/d3-graphviz.js:27:377

#3

Maybe the tests moved from a browser to a headless/v8 js interpreter. Browsers will have a navigator field, headless test environments might not.

Havent looked deeply at this, just a guess

#4

@magjac - @hpcc-js/wasm ships with two different versions:

  • dist/index.js
  • dist/index.node.js

When loading in a browser (headless or not) then you should be using the “dist/index.js” version.
When loading in a NodeJS environment you should be using dist/index.node.js

I can’t really tell if your tests are running in a browser or not, but if they are you may be resolving to the wrong version?

#5

Googling the error in question and it appears to be a NodeJS error, so my comment above would be irrelevent. But I don’t think I supported NodeJS prior to 1.0.0 - confused…

#6

Thanks. The tests run in NodeJs through tape and uses jsdom and a lot of homecooked polyfills. Nothing in the tests has changed. It works without any problems with earlier versions of @hpcc-js/wasm and d3-zoom. I guess I just have to add more polyfills. If I can figure out which :weary:.

d3-zoom added the use of the navigator field in this commit.

@hpcc-js/wasm does not use it directly, but many of its dependencies do.

#7

Solved with this simple polyfill. I also needed an SVGElement viewBox polyfill.

#8

If your using NodeJS + Polyfills to “pretend” its a browser, then you should really test against the browser version of @hpcc-js/wasm

If you use NodeJS + no polyfills then use the node version of @hpcc-js/wasm (and I would expect it to work fine).

Looking at the code in question I can see why it would fail with “some” polyfills (like window and document). At least it makes sense now!

#9

I wasn’t aware that there were two version of @hpcc-js/wasm. How do I select which one of them to use? I can’t find any info about that in the README.

#10

Sorry. I see now you’ve already explained this above.

#11

I’m explicitly loading ./node_modules/@hpcc-js/wasm/dist/index.js', but it seems to run ./node_modules/@hpcc-js/wasm/dist/index.node.js' anyway. :confused:

#12

Sometimes bundlers / test suites are too clever and read the entries from package.json?

FWIW they look like this:
“main”: “dist/index.node.js”,
“module”: “dist/index.es6”,
“module-node”: “dist/index.node.es6”,
“browser”: “dist/index.js”,