Plotly.js: Webpack support

[buremba]

I tried bundling Plotly with Webpack but couldn't be able to do it. I created a plotly.bundle.js file and added Plotly modules that I need to that custom module.

var plotlyCore = require(__dirname +'/app/static/components/plotly.js/lib/core');
plotlyCore.register([
    require(__dirname +'/app/static/components/plotly.js/lib/pie'),
    require(__dirname +'/app/static/components/plotly.js/lib/choropleth'),
    require(__dirname +'/app/static/components/plotly.js/lib/bar'),
    require(__dirname +'/app/static/components/plotly.js/lib/heatmap'),
    require(__dirname +'/app/static/components/plotly.js/lib/histogram'),
    require(__dirname +'/app/static/components/plotly.js/lib/scatter'),
]);
module.exports = plotlyCore;

Then added ify loader using this configuration:

{test: /node_modules/, loader: 'ify'}

When I try to run webpack command it throws this exception:

ERROR in ../components/plotly.js/src/core.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../build/ploticon in /Users/buremba/Code/rakam-ui/app/static/components/plotly.js/src
 @ ../components/plotly.js/src/core.js 35:16-44

ERROR in ../components/plotly.js/src/plotly.js
Module not found: Error: Cannot resolve module 'es6-promise' in /Users/buremba/Code/rakam-ui/app/static/components/plotly.js/src
 @ ../components/plotly.js/src/plotly.js 22:0-22

ERROR in ../components/plotly.js/src/plotly.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../build/plotcss in /Users/buremba/Code/rakam-ui/app/static/components/plotly.js/src
 @ ../components/plotly.js/src/plotly.js 30:0-27

ERROR in ../components/plotly.js/src/traces/bar/set_positions.js
Module not found: Error: Cannot resolve module 'fast-isnumeric' in /Users/buremba/Code/rakam-ui/app/static/components/plotly.js/src/traces/bar
 @ ../components/plotly.js/src/traces/bar/set_positions.js 12:16-41

ERROR in ../components/plotly.js/src/traces/bar/calc.js
Module not found: Error: Cannot resolve module 'fast-isnumeric' in /Users/buremba/Code/rakam-ui/app/static/components/plotly.js/src/traces/bar
 @ ../components/plotly.js/src/traces/bar/calc.js 12:16-41

[mdtusz]

Hi Buremba,

For future use, we try to keep our github issues reserved for found bugs rather than troubleshooting, but I'll be happy to help here this time.

It appears that the issue is with the paths you are using, or you are not using an up to date version of plotly.js. To use trace modules, you must be using plotly.js v1.5.0 or greater.

I would suggest installing using npm install --save plotly.js then using the default pathing to node_modules so that there is no need to specify such long paths with __dirname.

[buremba]

Hey @mdtusz,

Sorry for the confusion. I thought that this is an issue because I'm already using v1.5.2 and Webpack is able to find the Plotly files in my configuration. I installed Plotly with Bower and the Bower package is missing some of the dependencies such as ploticon and it also doesn't fetch external dependencies to a folder (array-tools, convex-hull etc.) so Webpack complains not found errors as expected.

I tried to install Plotly with npm as you suggested and point the path the that location in configuration file and now, Webpack is able to find the Plotly modules and its dependencies and bundle them. Thanks!

Just another quick question: Currently, the only problem is d3 dependency because I already have it in my application as dependency. Plotly bundles its own d3 dependency and there's no way to avoid the duplication of it AFAIK. Do you have any solution for that? Do you wait d3 4.0 as @etpinard mentioned in this gist or prefer any other solution?

[mdtusz]

Currently there's no _official_ solution for using an external version of d3 with plotly.js. Because of the api changes in newer versions of d3, we need to maintain a locked version that we can guarantee will work with our code. Injecting the d3 dependency throughout the plotly.js codebase will be a fairly large issue to tackle, so I don't foresee the feature being added in the near future.

If you are ok with using the version of d3 shipped with plotly.js (v3.5.12 at the time of writing), we expose d3 on the Plotly object, so you can either use Plotly.d3, or, somewhere in the beginning stages of your code, bind it to the global scope with window.d3 = Plotly.d3; to allow for easy idiomatic use with d3 elsewhere in your code.

Hope that helps!

[etpinard]

@buremba Webpack's external config option should do the trick.

[buremba]

Thanks @etpinard and @mdtusz, it works!

I also run into this issue (https://github.com/plotly/plotly.js/pull/195) since I was using d3 3.5.5, I added external config to my Plotly configuration and removed my d3 dependency from Webpack and it worked smoothly.

[etpinard]

Ah. That's a shame. d3 is notoriously bad at following semver.

[backnotprop]

Plotly is making my bundle pretty huge, adding about 1.2mb. Anyone think that I may be doing something wrong, or know of a work-around for this?

[mdtusz]

@mdramos you can now use the individual modules that you need from the plotly.js/lib and create a more lean bundle that suits your needs. e.g.

// Create a file that will configure your custom bundle - e.g. lean_plotly.js 
var Plotly = require('plotly.js/lib/core');

// Load in the trace types you need e.g. pie, and choropleth
Plotly.register([
    require('plotly.js/lib/pie'),
    require('plotly.js/lib/choropleth')
]);

// Export the custom build
module.exports = Plotly;

Then, elsewhere in your code you can require this file and use Plotly as you would normally.

https://github.com/plotly/plotly.js#modules

[backnotprop]

@mdtusz Thanks, will give it a go!

Update
Worked great!

[bpostlethwaite]

see https://github.com/plotly/plotly.js/blob/master/README.md#building-plotlyjs-with-webpack for recent instructions