custom webpack build and also requiring plotly.js/src/... breaks Plotly

[hellochar]

I'm on plotly.js@1.17.3, using a custom webpack build for Plotly, and I'm trying to import modules in the plotly.js src file:

// myUtilsFile.js
import * as Axes from "plotly.js/src/plots/cartesian/axes";

Axes.tickText(...) // cool, I can do things with the Plotly source modules!

But when I render a plot, I get:

Uncaught TypeError: Axes.list is not a function(…)
    exports.cleanLayout @ helpers.js:71
    Plotly.plot @ plot_api.js:104
    Plotly.newPlot @ plot_api.js:501
   <my code...>

This is the offending line:

// helpers.js
var axList = Axes.list({_fullLayout: layout});

I did some debugging and it looks like Axes is the empty object {} in helpers.js. Why is that? Turns out, axes.js has some code:

// axes.js
require("../other-plotly-modules");

...
var axes = module.exports = {}; // line 23 
...

The problem here is that, before this line 23, webpack had already supplied a default empty object to module.exports, and that one is being passed to helpers.js. Then, when axes.js is evaluated, the first require to "other-plotly-modules" starts a require subtree that eventually includes helpers.js, which then tries to include axes.js, and gets back that default empty object, which is wrong.

Long story short, could Plotly.js only lazily set module.exports? e.g.

var axes = module.exports = (module.exports || {})

Thanks!

[etpinard]

Ah. That's because the plotly.js src directory is (still) plagued by a some circular dependencies patterns. So, depending on the import ordering, some module can be left blank at runtime.

We hope to get rid of those circular dependencies at point in the near future (milestone).

In the meantime, I'd recommend exposing internal modules on-top of the default Plotly export to ensure that circular dependencies are met. For example,

var Plotly = require('plotly.js')
var Axes = require('plotly.js/src/plots/cartesian/axes')

Plotly.Axes = Axes

module.exports = Plotly

[hellochar]

That works like a charm, thank you so much for the quick response!