WebDataRock TypeError: Cannot read property element of null

Question

WebDataRock TypeError: Cannot read property 'element' of nul AND WebDataRocks: Pivot cannot be drawn.

Grettings.

I try to implement WebDataRocks in my react-app project, i can implementate the WebDataRock.Pivot Component but since begin to render de component the console print this message

webdatarocks.js:180 Uncaught TypeError: Cannot read property 'element' of null at new e (webdatarocks.js:180) at b.setControls (webdatarocks.js:1006) at webdatarocks.js:992

and afther a few seconds the console print this:

index.js:1 WebDataRocks: Pivot cannot be drawn.

    import React from "react";
         import ReactDOM from "react-dom";
         import WebDataRocks from "webdatarocks";
     
         export class Pivot extends React.Component<WebDataRocks.Params, any> {
         webdatarocks: WebDataRocks.Pivot;
         
         componentDidMount() {
            const tempProps : any = this.props;
            const pivotData = tempProps.pivotData;
            const columnsData : any[] = tempProps.columnsData;
     
            const tempColums = [];
            const tempKeys = [];
     
            columnsData.forEach(cd => {
                const tempLabelColumn = cd.title;
                tempColums.push(tempLabelColumn);
                tempKeys.push(cd.key);
            });
     
            this.webdatarocks = new WebDataRocks({
                toolbar: true,
                report: {
                    dataSource: {
                        data: pivotData
                    },
                    slice: {
                        rows: tempKeys,
                        expands: {
                            expandAll: true
                        },
                        measures: [{
                            "uniqueName": "Price",
                            "aggregation": "sum",
                            "format": "currency"
                        }, {
                            "uniqueName": "Discount",
                            "aggregation": "sum",
                            "format": "currency"
                        }],
                        columns: tempColums,
                    },
                    options: {
                        "grid": {
                            "type": "flat"
                        },
                    },
                    formats: [{
                        "name": "",
                        "thousandsSeparator": " ",
                        "decimalSeparator": ".",
                        "decimalPlaces": 2,
                        "maxSymbols": 20,
                        "currencySymbol": "",
                        "currencySymbolAlign": "left",
                        "nullValue": " ",
                        "infinityValue": "Infinity",
                        "divideByZeroValue": "Infinity"
                    }]
                },
                container: ReactDOM.findDOMNode(this)
            });
         }
     
         componentWillUnmount() {
            // console.log('componentWillUnmount this.webdatarocks', this.webdatarocks.dispose);
            if (this.webdatarocks.dispose) {
                 // this code break the system
                // this.webdatarocks.dispose();
            }
         }
         
         shouldComponentUpdate() {
            return false;
         }
     
           render() {`enter code here`
            return <div>Pivot</div>;
           }
         }
     
         export default Pivot;

And this is my response.

Some one can help me with this issue?

Thanks and I appreciate any help.

Answer 1

This error means that WebDataRocks cannot find the DOM element where it should be initialized. I have tried the following GitHub sample: https://github.com/WebDataRocks/pivot-react/tree/master/typescript and it worked fine for me. It seems that your code sample is also based on it.

My recommendation for you is the following: start with dividing your business logic from the WebDataRocks component code. Here is the code of the proxy between vanilla WebDataRocks and your React application: https://github.com/WebDataRocks/pivot-react/blob/master/typescript/src/webdatarocks/webdatarocks.react.tsx. You can use it as a basic component for creating custom WebDataRocks visualizations. Therefore, there are not so many cases when it should be modified.

And here is the sample of the client code where you can initialize WebDataRocks reports and other configs: https://github.com/WebDataRocks/pivot-react/blob/master/typescript/src/App.tsx.