Ag-Grid createRangeChart не является функцией

Question

Я пытаюсь создать дальний график с ag-grid, но при загрузке страницы в консоли возникает ошибка «TypeError: params.api.createRangeChart не является функцией». Я пытался сделать как в официальном руководстве к диаграммам (https://www.ag-grid.com/javascript-grid-charts-integrated-chart-range-api/), но это не работает. Что я делаю неправильно? (ag-grid v21.2.1)

UPD Итак, я выяснил, что это проблема, связанная с пакетом, потому что с модулями этот метод существует. Тем не менее, есть идеи, как это исправить для пакетов?

<template>
    <div class="table_outer_container">
        <div class="table_navigation_button_container" v-if="navigationTabs">
            <navigation-tab v-for="(navTab, index) in navigationTabs"
                            :isLoading="isLoading"
                            :navTab="navTab"
                            :key="navTab.name + index + navTab.active"
                            @tab-switch="makeTabActive"
            ></navigation-tab>
        </div>
        <ag-grid-vue style="width: 60%"
                     class="ag-theme-balham"
                     :gridOptions="gridOptions"
                     :rowHeight="rowHeight"
                     :columnDefs="columnDefs"
                     :rowData="rowData"
                     :context="context"
                     :enableRangeSelection="true"
                     :enableCharts="true"
                     :navigationTabs="navigationTabs"
                     :defaultColDef="defaultColDef"
                     :domLayout="autoHeight"
                     @first-data-rendered="onFirstDataRendered"
                     :fileName="fileName">
        </ag-grid-vue>
        <div id="table_chart" style="flex: 1 1 auto; overflow: hidden; height: 30%; width: 25%;"></div>
    </div>
</template>

<script>

    import {AgGridVue} from "ag-grid-vue";
    import "ag-grid-enterprise";
    import "ag-grid-enterprise/chartsModule";

    import HyperlinkRenderer from "./cell_renderers/hyperlink_cell_renderer.vue";
    import MultilinkRenderer from "./cell_renderers/multilink_cell_renderer.vue";
    import NavigationTab from "./navigation_tab.vue";


    export default {
        data() {
            return {
                gridOptions: null,
                context: null,
                gridApi: null,
                columnApi: null,
                isLoading: false,
                rowHeight: 30,
                autoHeight: 'autoHeight'
            }
        },
        name: 'App',
        props: ['endpoint', 'columnDefs', 'rowData', 'defaultColDef', 'navigationTabs', 'versionId', 'fileName', 'chartParams'],
        components: {
            AgGridVue,
            HyperlinkRenderer,
            MultilinkRenderer,
            NavigationTab
        },
        beforeMount() {
            this.context = {componentParent: this};
            this.gridOptions = {
                getRowClass: this.getRowClass
            };
            this.domLayout = 'autoHeight';
        },
        mounted() {
          this.gridApi = this.gridOptions.api;
          this.gridApi.sizeColumnsToFit()

        },
        methods: {
            onFirstDataRendered(params){
                var eContainer = document.querySelector('table_chart');
                var chart_params = {
                    cellRange: {
                        columns: ['delivered', 'in_transit', 'held'],
                    },
                    chartType: 'stackedBar',
                    chartContainer: eContainer,
                    processChartOptions: function(params) {
                        params.options.seriesDefaults.tooltip.renderer = function(params) {
                            var titleStyle = params.color
                                ? ' style="color: white; background-color:' + params.color + '"'
                                : '';
                            var title = params.title
                                ? '<div class="ag-chart-tooltip-title"' +
                                titleStyle +
                                '>' +
                                params.title +
                                '</div>'
                                : '';
                            var value = params.datum[params.yKey]
                                .toString()
                                .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
                            return (
                                title +
                                '<div class="ag-chart-tooltip-content" style="text-align: center">' +
                                value +
                                '</div>'
                            );
                        };
                        return params.options;
                    },
                };
                params.api.createRangeChart(chart_params);
            },
            navigateTo(url) {
                window.open(url, '_blank');
            },
            getRowClass(params) {
                if (params.data.customRowClass) {
                    return params.data.customRowClass
                }
            },
            makeTabActive(clickedTab) {
                if (this.isLoading) {
                    return false
                }
                this.toggleLoading();
                this.navigationTabs.forEach(function (tab) {
                    tab.active = (clickedTab.name === tab.name)
                });
                this.endpoint = clickedTab.endpoint;
                this.updateFromEndpoint()
            },
            updateFromEndpoint() {
                const endpoint = this.endpoint;
                const self = this;
                $.ajax({
                    url: endpoint,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        version_id: self.versionId
                    },
                    success: function (data) {
                        const tableData = data['table_data'];
                        const rowData = tableData['rowData'];
                        const columnDefs = tableData['columnDefs'];
                        const defaultColDef = tableData['defaultColDef'];
                        self.rowData = rowData;
                        self.columnDefs = columnDefs;
                        self.defaultColDef = defaultColDef;
                        self.toggleLoading()
                    },
                    error: function (xhr, err) {
                        alert(err);
                    }
                });
            },
            toggleLoading() {
                if (this.isLoading) {
                    this.gridApi.hideOverlay();
                } else {
                    this.gridApi.showLoadingOverlay()
                }
                this.isLoading = !this.isLoading
            }
        }
    }
</script>