plotly/react-pivottable

React App crashes when trying to use react-plotly.js

ShreyaRijal opened this issue · 4 comments

ShreyaRijal commented

Hi, my app crashes when I try to execute the example code from GitHub. When I remove these imports:
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

the application loads up fine. However when that code is included, it crashes.

In the terminal I pasted this command:
npm install --save react-pivottable react-plotly.js plotly.js react react-dom

I copied this code:

import React from 'react';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

// create Plotly renderers via dependency injection
const PlotlyRenderers = createPlotlyRenderers(Plot);

// see documentation for supported input formats
const data = [['attribute', 'attribute2'], ['value1', 'value2']];

class App extends React.Component {
constructor(props) {
super(props);
this.state = props;
}
render() {
return (
<PivotTableUI
data={data}
onChange={s => this.setState(s)}
renderers={Object.assign({}, TableRenderers,PlotlyRenderers)}
{...this.state}
/>
);
}
}

//ReactDOM.render(, document.body);
export default App;

I get these issues in my terminal:

npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! test-app@0.1.0 start: react-scripts start
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the test-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I couldn't find anyone else with the same problem

Thank you

niekbruins commented

I have the same problem. The workaround for me is to use plotly external by adding it with the <script> tag

ShreyaRijal commented

How do you do that in React?

ShreyaRijal commented

For those who are curious about adding scripts into React and getting plotly.js to work, this is the code:

import React from 'react';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import createPlotlyComponent from 'react-plotly.js/factory';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

// see documentation for supported input formats
const data = [['attribute', 'attribute2'], ['value1', 'value2']];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            PlotlyRenderers:""
        }

        this.scriptLoaded = this.scriptLoaded.bind(this);
    }

    componentDidMount() {
        const script = document.createElement("script");
        script.src = "https://cdn.plot.ly/plotly-latest.min.js";
        script.charset="utf-8";
        script.async = true;
        script.onload = () => this.scriptLoaded();

        document.body.appendChild(script);
    }

    scriptLoaded() {
        let Plot = createPlotlyComponent(window.Plotly);
        let PlotlyRenderers = createPlotlyRenderers(Plot);

        this.setState({
            PlotlyRenderers:PlotlyRenderers
        })
    }

    render() {
        return (
            <div>
                <PivotTableUI
                    data={data}
                    onChange={s => this.setState(s)}
                    renderers={Object.assign({}, TableRenderers, this.state.PlotlyRenderers)}
                    {...this.state}
                />
            </div>
        );
    }
}
//ReactDOM.render(<App />, document.body);
export default App;

The script is loaded after the component is added to the DOM and is therefore in the componentDidMount() method. Once it is loaded, the script is used in the scriptLoaded() method which updates the states and re-renders the component with the script included.

  • ❤️1