javascriptvue.jsgoogle-visualizationchartkickreact-google-charts

GeoChart in Vue throwing error : chartsLib.visualization[this.type] is not a constructor


I have been working on a simple single-page-app that displays data on a world map using GeoChart. Everything was working fine and I was able to view the map for almost 3 months of working on the app until all of a sudden my map stopped showing up when I test my app in localhost, despite making zero changes to the geomap vue component

Upon clicking on "inspect" -> "network" I can see the error below (please see screen shot)

error message

I have created a simple replica of my vue component using codesandbox here for your convenience to reproduce the error https://codesandbox.io/s/sharp-goldberg-djdfi?fontsize=14&hidenavigation=1&theme=dark

I am a complete novice in front-end, Vue and JS, so please go easy on me!


Solution

  • This was due to a change with Google Charts. Upgrading to vue-chartkick 0.6.1 will fix it.

    More context: https://github.com/ankane/chartkick/issues/543