plotly
babel-standalone: ReferenceError: exports is not defined
Although Plotly React works properly in the browser with babel-standalone, React-pivottable throws ReferenceError: exports is not defined:
Repro:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Plotly/React/PivotTables in browser compilation</title>
<script src="https://unpkg.com/[email protected]/babel.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/dist/create-plotly-component.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/PivotTableUI.js"></script>
</head>
<body>
<div id="root-div"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
<Plot
data={[
{
type: 'scatter',
mode: 'lines+points',
x: [1, 2, 3],
y: [2, 6, 3],
marker: {color: 'red'}
},
{
type: 'bar',
x: [1, 2, 3],
y: [2, 5, 3]
}
]}
layout={{
width: 320,
height: 240
}}
/>
</div>
);
}
}
const Plot = createPlotlyComponent(Plotly);
ReactDOM.render(
<App/>,
document.getElementById('root-div')
);
</script>
</body>
</html>
I'm not that familiar with babel-standalone, and this project's distribution system wasn't really designed with it in mind but from a glance at their documentation, it seems like you need to add type="text/babel" and possibly a data-presets attribute to the script tags you want babel-standalone to process...
the above already sets the type "text/babel" and babel-standalone is already doing its thing. Problem is PivotTableUI doesn't load properly.
If you try the above code as is from any browser, you will see Plotly working fine but an exception from PivotTableUI.
Since the react-plotly component works with babel standalone, I was expecting the same for PivotTable.