deno import Plotly error: Cannot read properties of undefined (reading 'navigator')

[gplanansky]

Version: Deno 1.39.2
GIT_COMMIT_HASH=741afc4b94427588c628925fef464623d373430f

MacOS m1

Reproduce Build deno foir aarch64-apple-darwin:

git clone --recurse-submodules https://github.com/denoland/deno.git

$ cd deno
$ cargo build -vv > /tmp/cargo-build.txt
  Downloaded deno_unsync v0.3.2
  Downloaded deno_ops v0.120.0
  Downloaded serde_v8 v0.153.0
[...]
CARGO=/Users/george/.rustup/toolchains/1.75.0-aarch64-apple-darwin/bin/cargo CARGO_BIN_NAME=deno CARGO_CRATE_NAME=deno CARGO_MANIFEST_DIR=/Users/george/deno/deno-dev/deno/cli CARGO_PKG_AUTHORS='the Deno authors' CARGO_PKG_DESCRIPTION='Provides the deno executable' CARGO_PKG_HOMEPAGE='' CARGO_PKG_LICENSE=MIT CARGO_PKG_LICENSE_FILE='' CARGO_PKG_NAME=deno CARGO_PKG_README=README.md CARGO_PKG_REPOSITORY='https://github.com/denoland/deno' CARGO_PKG_RUST_VERSION='' CARGO_PKG_VERSION=1.39.2 CARGO_PKG_VERSION_MAJOR=1 CARGO_PKG_VERSION_MINOR=39 CARGO_PKG_VERSION_PATCH=2 CARGO_PKG_VERSION_PRE='' CARGO_PRIMARY_PACKAGE=1 DYLD_FALLBACK_LIBRARY_PATH='/Users/xxx/deno/deno-dev/deno/target/debug/deps:/Users/george/.rustup/toolchains/1.75.0-aarch64-apple-darwin/lib:/Users/xxx.rustup/toolchains/1.75.0-aarch64-apple-darwin/lib:/Users/xxx/lib:/usr/local/lib:/usr/lib' GIT_COMMIT_HASH=741afc4b94427588c628925fef464623d373430f 

Test deno imports portals ok, fails to import plotly:

$ target/debug/deno
Deno 1.39.2
exit using ctrl+d, ctrl+c, or close()
REPL is running with all permissions allowed.
To specify permissions, run deno repl with allow flags.

import * as pl from 'npm:nodejs-polars';
undefined

import Plotly from "npm:[email protected]"
Uncaught TypeError: Cannot read properties of undefined (reading 'navigator')
at Object.webpack_modules.71828.lib.getFirefoxVersion (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:26820:49)
at Object.71828 (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:27396:26)
at webpack_require (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:224454:42)
at Object.98847 (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:26:11)
at webpack_require (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:224454:42)
at Object.8729 (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:23241:1)
at webpack_require (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:224454:42)
at Object.19548 (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:213:18)
at webpack_require (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:224454:42)
at Object.27909 (file:///Users/xxx/Library/Caches/deno/npm/registry.npmjs.org/plotly.js-dist/2.27.1/plotly.js:343:14)

[dsherret]

Is this library designed to work in server side runtimes? I get the following in Node.js:

> cat package.json
{
  "name": "scratch",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "plotly.js-dist": "^2.28.0"
  }
}
> cat main.js
import Plotly from "plotly.js-dist";

console.log(Plotly);
> node main.js
V:\scratch\node_modules\plotly.js-dist\plotly.js:16
})(self, function() {
   ^

ReferenceError: self is not defined
    at Object.<anonymous> (V:\scratch\node_modules\plotly.js-dist\plotly.js:16:4)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)

Node.js v18.12.1

Looking at the source of that error above, it seems to be because window is undefined, which it is in Deno within npm packages (because a window global existing caused issues (also, see #13367 about possibly removing this from Deno). Also, it seems like a bug that Deno exposes self here from window.self

[gplanansky]

Indeed, it is so:
https://plotly.com/nodejs/getting-started/
plus there is the matter of network authentication for nodejs mode

[dsherret]

@gplanansky so it looks like the plotly package works in Node (and I'm able to import it in Deno now), but the plotly.js-dist is the one for the web.

[gplanansky]

@dsherret what is the import invocation that succeeded for you in Deno? Is it the one to also use with the deno kernel in Jupyter Lab?

[dsherret]

@gplanansky I didn't test it further, but based on those node.js instructions this worked for me:

// import Plotly from "npm:plotly.js-dist";
import Plotly from "npm:plotly";
console.log(Plotly);

[gplanansky]

I confirm that "npm:plotly" does import in Deno.

However, for plotting with the deno kernel in Jupyter Lab, as you all ably do with d3 (https://deno.com/blog/v1.37 ) and Kelly further does with vega-lite (https://blog.jupyter.org/bringing-modern-javascript-to-the-jupyter-notebook-fc998095081e), would take the web plotly.

Unfortunately I guess the plotly.js-dist formulation defeats doing that.

[SebastienGllmt]

@gplanansky I didn't test it further, but based on those node.js instructions this worked for me:

// import Plotly from "npm:plotly.js-dist";
import Plotly from "npm:plotly";
console.log(Plotly);

For reading this afterwards, the plotly library was deprecated back June this year (you can see it on Github here) and there is an open issue on the plotly.js Github you can track for getting the library working in node/deno: plotly/plotly.js#7276 (this error isn't Deno's fault)