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:plotly.js-dist@2.27.1" 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 https://github.com/denoland/deno/issues/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.