babel-standalone: ReferenceError: exports is not defined

rcrezende commented 6 years ago

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/babel-standalone@6.26.0/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/react-plotly.js@1.0.2/dist/create-plotly-component.js"></script>
        <script crossorigin src="https://unpkg.com/react-pivottable@0.4.0/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>

nicolaskruchten commented 6 years ago

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...

rcrezende commented 6 years ago

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.

plotly / react-pivottable

babel-standalone: ReferenceError: exports is not defined #25