Plotly.js: Plotly.js requires gl in Electron contexts

[rgbkrk]

When using plotly.js in an Electron app, it requires gl. I'm guessing this is because Plotly.js determines that it's running in a node context, even though there is a window and a full browsing environment available. Installed gl for now, figured I'd post an issue. I'll link to the relevant PR on the nteract side shortly.

---

For those that stumble upon this issue, make sure to use:

const plotly = require('plotly.js/dist/plotly.js');

When requiring plotly. Everything will then work just fine in Electron land.

[rgbkrk]

Related support for Plotly in nteract: https://github.com/nteract/nteract/pull/662

Possibly related gl error:

[etpinard]

Requiring plotly.js as require('plotly.js/dist/plotly.js') should make this issue disappear.

Is there an electron field we could add to the package.json to tell Electron to use the dist bundle instead of resolving all the src/ requires?

I'm guessing this is because Plotly.js determines that it's running in a node context

The only reason that happens is because of our mapbox-gl dependency. I think this issue should be moved to https://github.com/mapbox/mapbox-gl-js/issues unless there's a way to Electron to use the dist/ bundle.

[rgbkrk]

Is there an electron field we could add to the package.json to tell Electron to use the dist bundle instead of resolving all the src/ requires?

Sadly, no.

I'll try the dist path, sounds like an awesome option.

[sglyon]

@rgbkrk how do you tell that gl isn't working inside electron?

I my Julia package (PlotlyJS.jl) that uses Electron as a display window I am able to make a scattergl trace, for example

EDIT: I see -- just saw your edit :)

[etpinard]

@spencerlyon2 the gl issue (see -> https://github.com/stackgl/headless-gl ) can be seen by require('plotly.js)of version1.16.0and up which includemapbox-gl(to generatescattermapboxtraces) which itself requires thegl` module.

Our gl2d and gl3d trace types don't require gl.

[rgbkrk]

Ok great, that dist bundle works perfect for displaying the plot above.

[sglyon]

@etpinard thanks for the explanation.

I must be getting around it without knowing because I'm running plotly.js 0.16.2 inside electron without any problems -- oh well, don't fix it if is isn't broken!

[rgbkrk]

I'll have something nice for you soon @spencerlyon2 that you can use to send the plotly JSON spec over to this same component in nteract: https://github.com/nteract/nteract/pull/662

[sglyon]

That's great. I really need to take a closer look at nteract.

I've been very happy with the combination of Electron + plotly.js for my Julia package -- it let's me to some really cool streaming things.

[etpinard]

@rgbkrk @spencerlyon2 Ok if I close this issue?

[sglyon]

Yep, good for me

[rgbkrk]

My second comment in this thread is fixed, not the core bit. We're still stuck with a native dependency on gl because of the npm install.

[etpinard]

We're still stuck with a native dependency on gl because of the npm install

... in a node.js context that is: which we don't support (at least until https://github.com/tmpvar/jsdom/issues/1368 is done - as plotly.js makes use of XMLSerializer).

[rgbkrk]

I may end up creating a separate package specifically for electron uses that cuts a version based on plotly.js, though I'd rather not manage that and let it get out of sync.

[etpinard]

Yeah good point about the maintenance burden.

We might end up publishing another package specifically from node contexts (plotly.js-node anyone??) again once jsdom support all the browser things plotly.js uses. But, that said, the _main_ plotly.js package will remain a browser-only package in the foreseeable future.

[rgbkrk]

Yup, browser only is fine for me (browserifiable/webpackable that is).

[rgbkrk]

Ok we just tried to switch our build setup to not have any compilers, etc. available and the fact that npm install will try to bring in gl fails on us:

https://github.com/nteract/nteract/pull/687

[rgbkrk]

What if gl is a dev dependency and if someone is really using this from node, they have to install gl themselves?

[etpinard]

What if gl is a dev dependency and if someone is really using this from node, they have to install gl themselves?

I'd vote :-1: on that, plotly.js is a browser-only app at the moment (and for the foreseeable future).

I don't see why we should add a dev dependency to make sure that require('plotly.js') works in a node context, even though Plotly.plot() won't work.

[rgbkrk]

I think something is lost in translation here. I want a browser only app too and gl is not used in the browser version - it is in the node version (and currently in the dependencies).

[rgbkrk]

Welp, I'm a jerk. It was a peer dependency of a downstream dependency that has been resolved since upgrading. No gl necessary.

Sorry to waste your time @etpinard, thank you for the lovely JS.

[FrantisekGazo]

I got the Uncaught Error: Cannot find module 'gl' when trying the plotly.js in Electron app.

I installed version 1.18.1 via npm install plotly.js

only require('plotly.js/dist/plotly.js') works

[etpinard]

@FrantisekGazo

please read https://github.com/plotly/plotly.js/issues/891#issuecomment-244088863

[rgbkrk]

I've updated the issue description to include the require into dist so people who end up at this issue see the way to handle it upfront.

[rgbkrk]

Since our overall bundled electron app was rather big (especially for Hydrogen), @lgeiger made minimal-plotly with only the .min.js build. It would be good for us to use the source distribution as much as possible (to allow for flattened npm dependencies and tree shaking), this is our first pass for now though.