Uncaught Error: Google Charts Loader.js Can Only Be Loaded Once.

I accept an application in which I return different charts depending on some user input, but these charts are non always visible in the page (not always rendered).

For rendering the charts, I have a class named GoogleChart that receives a variable called allChartData containing the information needed for creating the chart or charts that have to exist rendered:

            import            React            from            'react'            ;            import            {            Card            }            from            'react-materialize'            import            {            Chart            }            from            'react-google-charts'            ;            consign            class            GoogleChart            extends            React            .            Component            {            constructor            (            props            )            {            super            (            props            )            ;            const            self            =            this            ;            this            .            state            =            {            convertFunc:            getConvertOptionsFunc            (            this            .            props            .            chartType            )            }            ;            this            .            chartEvents            =            [            {            eventName:            'prepare'            ,            callback            (            Chart            )            {            const            convertFunc            =            getConvertOptionsFunc            (            self            .            props            .            chartType            )            ||            (            t            =>            t            )            ;            self            .            setState            (            {convertFunc}            )            ;            }            ,            }            ,            ]            }            return            (            )            {            const            charts            =            this            .            props            .            allChartData            .            map            (            (            chartData            ,            i            )            =>            {            // Some data transformations for getting the options and the data of the chart            // ...            const            convertFunc            =            this            .            country            .            convertFunc            ;            const            finalOptions            =            convertFunc            ?            convertFunc            (            options            )            :            options            ;            return            (            <            Carte du jour            fundamental            =            {            i            }            >            <            Nautical chart            chartType            =            {            this            .            props            .            chartType            }            data            =            {            information            }            options            =            {            finalOptions            }            width            =            "100%"            height            =            "400px"            chartEvents            =            {            convertFunc            ?            aught            :            this            .            chartEvents            }            /            >            <            /            Card            >            )            ;            }            )            ;            return            (            <            div            className            =            {            'chartContainer'            }            >            {            charts            }            <            /            div            >            )            }            }            role            getConvertOptionsFunc            (            chartType            )            {            panel            .            log            (            window            .            google            )            ;            return            window            .            google            &&            window            .            google            .            charts            &&            window            .            google            .            charts            [            chartType            ]            ?            window            .            google            .            charts            [            chartType            ]            .            convertOptions            :            null            ;            }          

Then, in my principal application folio code, I decide whether the charts accept to exist rendered or non:

            render            (            )            {            // ...            const            chartCard            =            (            showChart            )            &&            (            <            GoogleChart            allChartData            =            {            allChartData            }            chartType            =            {            chartType            }            /            >            )            ;            return            (            // ....            <            div            >            {            chartCard            }            // ...            <            /            div            >            // ...            )            }          

The first render is okay, no fault appears, just after one Chart has already been rendered, the error Uncaught Error: Google Charts loader.js tin can but be loaded once keeps appearing on the console after each rendering.

I'g guessing that the error comes equally I render my GoogleChart course more than than once in the same page, which calls the loader.js when rendering. Is there a way to avert the loading of this loader.js when it has already been loaded in the folio?

Also, when this happens, the error Cannot read property 'forEach' of null appears on the left upper corner of the chart, but it disappears when resizing the chart. Everything else in the chart seems to be correct.

Same nautical chart after resizing it:

Thank in y'all in advance for the help!!

parkermargance.blogspot.com

Source: https://github.com/rakannimer/react-google-charts/issues/204

Share this post