Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack support

See original GitHub issue

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

Issue Analytics

State:
Created 8 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

4reactions

bpostlethwaitecommented, Oct 3, 2017

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

3reactions

mdtuszcommented, Apr 11, 2016

@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

Top Results From Across the Web

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...

webpack.js.org - GitHub

Webpack supports ES2015+, CommonJS and AMD modules out of the box. It performs clever static analysis on the AST of your code. It...

Getting Started With Webpack - Smashing Magazine

Modern browsers provide good support for JavaScript modules, ... Webpack supports modules created using the ES6, CommonJS and AMD syntax.

What is Webpack - SurviveJS

Webpack supports ES2015, CommonJS, MJS, and AMD module formats out of the box. There's also support for WebAssembly, a new way of running...

Supported technologies: Webpack - Wallaby.js

Wallaby.js Supported technologies: Webpack. ... This documentation page describes the wallaby-webpack postprocessor, if you're interested in how to use the ...