Fix issue with plotly.js + webpack + typescript

[gnestor]

When using plotly.js with webpack, the default export causes the following runtime error:

Error: It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform: https://github.com/substack/node-browserify#browserifytransform
    at module.exports (browser.js:2)
    at Object.module.exports (shaders.js:4)
    at __webpack_require__ (bootstrap 4110bc1…:49)
    at Object.module.exports (lines.js:11)
    at __webpack_require__ (bootstrap 4110bc1…:49)
    at Object.<anonymous> (convert.js:12)
    at __webpack_require__ (bootstrap 4110bc1…:49)
    at Object.<anonymous> (index.js:13)
    at __webpack_require__ (bootstrap 4110bc1…:49)
    at Object.<anonymous> (scatter3d.js:11)

Importing plotly.js/lib/core resolves this issue, but the type declarations provided by @types/plotly.js don't provide delcarations for the plotly.js/lib/core module (even though that module is identical to the default module).

I think the only way to resolve this is to add a declaration for plotly.js/lib/core to @types/plotly.js...

[gnestor]

@types/plotly.js 1.28.3 was just released and resolves this. Publishing a new version of this extension to npm now...

[bpostlethwaite]

Updated docs at:
https://github.com/plotly/react-plotly.js#build-with-webpack
and
https://github.com/plotly/react-plotly.js#build-with-create-react-app

[gnestor]

@bpostlethwaite Do you suggest that we update our current implementation (add plotly.js script to HTML body and then use Plotly.newPlot)?

[bpostlethwaite]

I have been building plotly.js with webpack successfully on another project using the instructions above (or more simply: https://github.com/plotly/plotly.js#building-plotlyjs-with-webpack).

It isn't hard to set up so if you think it will result in a simpler system or cleaner code then I recommend giving it a shot.

[gnestor]

We unfortunately don't have access to the webpack config, so we can't use ify-loader. We are essentially doing what is described in the create-react-app instructions.

[bpostlethwaite]

Ah right ok. Yes that should work. Also I think

import Plotly from 'plotly.js/dist/[PICKABUNDLE]'

Works as the dist is precompiled.

We're working on a better solution but I don't have a timeline

[gnestor]

We were importing plotly.js/lib/core but then we discovered that certain non-core plots were not working, like pie charts (#24) and heatmaps (#22). If there is a way to do something like this but support all plot types, then I think that would be better 👌

[bpostlethwaite]

Yep the core is really minimal and if you are using it you are meant to manually register the components you are interested in. Try importing one of the dists. They are shipped in the npm tarball so you can scoop one of them using the direct path and bundle name from:

https://github.com/plotly/plotly.js/tree/master/dist

Example

import plotly from 'plotly.js/dists/plotly.min.js'

I think that should work.

[blink1073]

I suspect that webpack would warn when loading that file. We've seen that when xterm.js shipped a umd file.

[gnestor]

I have an older branch where I tried:

import * as Plotly from 'plotly.js/lib/core';
import Bar from 'plotly.js/lib/bar';
import Box from 'plotly.js/lib/box';
import Choropleth from 'plotly.js/lib/choropleth';
import Contour from 'plotly.js/lib/countour';
import Heatmap from 'plotly.js/lib/heatmap';
import Histogram from 'plotly.js/lib/histogram';
import Histogram2D from 'plotly.js/lib/histogram2d';
import Histogram2DCountour from 'plotly.js/lib/histogram2dcontour';
import Mesh3D from 'plotly.js/lib/mesh3d';
import Pie from 'plotly.js/lib/pie';
import Scatter3D from 'plotly.js/lib/scatter3d';
import ScatterGeo from 'plotly.js/lib/scattergeo';
import ScatterGL from 'plotly.js/lib/scattergl';
import Surface from 'plotly.js/lib/surface';

Plotly.register([
  Bar,
  Box,
  Choropleth,
  Contour,
  Heatmap,
  Histogram,
  Histogram2D,
  Histogram2DCountour,
  Mesh3D,
  Pie,
  Scatter3D,
  ScatterGeo,
  ScatterGL,
  Surface
]);

It didn't work at the time, probably because Typescript requires definitions for each of those modules and I didn't provide them...