Unable to add GeoJSON file to echarts

Confirmation

[X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

frontend@1.0.0 /home/nsm/Desktop/NSM/QueryHub/frontend
├─┬ @nuxtjs/composition-api@0.33.1
│ ├─┬ @nuxt/vue-app@2.15.7
│ │ ├── vue@2.7.10 deduped invalid: ">=3 < 4" from node_modules/vue-filepond
│ │ └─┬ vuex@3.6.2
│ │   └── vue@2.7.10 deduped invalid: ">=3 < 4" from node_modules/vue-filepond
│ └── vue@2.7.10 invalid: ">=3 < 4" from node_modules/vue-filepond
├── echarts@5.4.0
├─┬ nuxt-buefy@0.4.24
│ └─┬ buefy@0.9.22
│   └── vue@2.7.10 deduped invalid: ">=3 < 4" from node_modules/vue-filepond
├─┬ nuxt@2.15.7
│ ├─┬ @nuxt/babel-preset-app@2.15.7
│ │ └─┬ @vue/babel-preset-jsx@1.4.0
│ │   └── vue@2.7.10 deduped invalid: ">=3 < 4" from node_modules/vue-filepond
│ └─┬ @nuxt/vue-renderer@2.15.7
│   └── vue@2.7.10 deduped invalid: ">=3 < 4" from node_modules/vue-filepond
├─┬ vue-echarts@6.2.0 invalid: "6.2.3" from the root project
│ ├── echarts@5.4.0 deduped
│ ├─┬ vue-demi@0.13.11
│ │ └── vue@2.7.10 deduped invalid: ">=3 < 4" from node_modules/vue-filepond
│ └── vue@2.7.10 deduped
└─┬ vue-filepond@7.0.3
  └── vue@2.7.10 deduped invalid: ">=3 < 4" from node_modules/vue-filepond

Details

Importing all the necessary components like this:

import { map, max, ceil, capitalize } from 'lodash'
import { feature } from 'topojson-client'
import { use, registerMap } from 'echarts/core'
import {
    GeoComponent,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    VisualMapComponent,
} from 'echarts/components'
import { MapChart } from 'echarts/charts'
import VChart, { THEME_KEY } from 'vue-echarts'
import { CanvasRenderer } from 'echarts/renderers'

import IN from '@/assets/maps/india.json'
registerMap('India', feature(IN, IN.objects.states))

use([
    MapChart,
    CanvasRenderer,
    GeoComponent,
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    VisualMapComponent,
])

Template:

<template>
    <div>
        <div class="has-text-centered mb-2">
            <span class="is-size-4 has-text-medium has-text-weight-semibold has-text-grey-dark">
                Distribution
            </span>
        </div>

        <v-chart class="chart" :loading="false" :option="options" :loading-options="loader_option" />
    </div>
</template>

My options

        loader_option: {
            lineWidth: 3,
            fontSize: 14,
            text: 'Loading',
            fontWeight: 500,
            color: '#c23531',
            fontFamily: 'Averta',
        },
        options: {
            tooltip: {
                trigger: 'item',
                position: 'right',
                formatter: '{b}: {c}',
                borderColor: '#fff',
                textStyle: {
                    fontSize: 14,
                    fontWeight: 500,
                    fontFamily: 'Averta',
                },
            },
            visualMap: {
                min: 0,
                max: 10,
                orient: 'horizontal',
                align: 'top',
                inRange: {
                    color: [
                        '#e6f2fb',
                        '#cee5f6',
                        '#b5d9f2',
                        '#9ccced',
                        '#84bfe9',
                        '#6bb2e4',
                        '#52a5e0',
                        '#3999db',
                        '#218cd7',
                        '#087fd2',
                    ],
                },
                textStyle: {
                    fontSize: 14,
                    fontWeight: 500,
                    color: '#706266',
                    fontFamily: 'Averta',
                },
            },
            series: [
                {
                    name: 'MAP_OF_INDIAN_STATES',
                    type: 'map',
                    map: 'India',
                    data: [],
                    zoom: 1.14,
                    aspectScale: 0.85,
                    nameProperty: 'st_nm',
                    itemStyle: {
                        borderColor: '#9C9090',
                    },
                    emphasis: {
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            borderColor: '#2D232E',
                            areaColor: 'inherit',
                            borderWidth: 2,
                        },
                    },
                    select: {
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            borderColor: '#2D232E',
                            areaColor: 'inherit',
                            borderWidth: 2,
                        },
                    },
                },
            ],
        },

This code used to work, but now it's not working as I'm getting the following error.

 ERROR  [ECharts] Implementation of registerMap doesn't exists.                                            16:05:23

If the implementation of registerMap doesn't exists why does the docs for echarts show that this is the only way to register maps.

Reproduction

Reproduction is provided in the previous part

ecomfe / vue-echarts

Unable to add GeoJSON file to echarts #665