ag-grid-vue module not found even though it's in node_modules

Question

I'm following the Vue.js AgGrid getting started guide, step by step: https://www.ag-grid.com/vuejs-grid/

As soon as I add the <script> part and save, I get the following error:

ERROR  Failed to compile with 1 errors                              12:01:18 PM

This dependency was not found:

* ag-grid-vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save ag-grid-vue
Type checking in progress...
No type errors found
Version: typescript 3.5.3
Time: 1125ms

The thing is that I've already installed it, using the command in the guide:

npm install --save ag-grid-community ag-grid-vue vue-property-decorator

I've checked in node_modules and everything seems to be there. Here's the code I have in App.vue so far:

<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
                 class="ag-theme-balham"
                 :columnDefs="columnDefs"
                 :rowData="rowData">
    </ag-grid-vue>
</template>

<style lang="scss">
  @import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
  @import "../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
</style>

<script>
    import {AgGridVue} from "ag-grid-vue";

    export default {
        name: 'App',
        data() {
            return {
                columnDefs: null,
                rowData: null
            }
        },
        components: {
            AgGridVue
        },
        beforeMount() {
            this.columnDefs = [
                {headerName: 'Make', field: 'make'},
                {headerName: 'Model', field: 'model'},
                {headerName: 'Price', field: 'price'}
            ];

            this.rowData = [
                {make: 'Toyota', model: 'Celica', price: 35000},
                {make: 'Ford', model: 'Mondeo', price: 32000},
                {make: 'Porsche', model: 'Boxter', price: 72000}
            ];
        }
    }
</script>

Any idea what's going on? On MacOS Catalina if that matters, and using the latest LTS version of Node (just downloaded it this morning). I've also tried uninstalling and reinstalling node (the "full" way that removes all the hidden node folders and stuff too, then reinstalling from the site).

Answer 1

Looks as though the ag-grid getting started documentation is out of date. The proper packages to install now are based on modules.

Eg under dependencies in package.json :

"@ag-grid-community/all-modules": "~22.1.0",
"@ag-grid-community/client-side-row-model": "~22.1.0",
"@ag-grid-community/core": "~22.1.0",
"@ag-grid-community/csv-export": "~22.1.0",
"@ag-grid-community/infinite-row-model": "~22.1.0",
"@ag-grid-community/vue": "~22.1.0",
"@ag-grid-enterprise/all-modules": "~22.1.0",

Then in the component's <script> :

import {AgGridVue} from "@ag-grid-community/vue";
import {AllCommunityModules} from '@ag-grid-community/all-modules';

In "data" under export default :

data() {
    return {
        columnDefs: null,
        rowData: null,
        modules: AllCommunityModules
    }
},

And finally in the <template> :

<template>
    <ag-grid-vue style="width: 500px; height: 500px;"
                  class="ag-theme-balham"
                 :columnDefs="columnDefs"
                 :rowData="rowData"
                 :modules="modules">
    </ag-grid-vue>
</template>

Got lots of help from https://www.ag-grid.com/javascript-grid-modules/#installing-ag-grid-modules for this. They really need to update their getting started pages!