Warning in ag-Grid: You are mixing modules (i.e. @ag-grid-community/core) and packages (ag-grid-community)

Question

i'm using these npm modules for the ag-grid:

"@ag-grid-community/react": "^25.0.1",
"@ag-grid-enterprise/all-modules": "25.0.1",
"ag-grid-community": "^25.0.1",
"ag-grid-enterprise": "^25.0.1",
"ag-grid-react": "^25.0.1",

and these imports :

  import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { AgGridReact } from 'ag-grid-react';
  import 'ag-grid-enterprise';
  import { ModuleRegistry, AllModules } from '@ag-grid-enterprise/all-modules';
  import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
  import '@ag-grid-community/all-modules/dist/styles/ag-theme-material.css';
  import { LicenseManager } from '@ag-grid-enterprise/core';
    
  LicenseManager.setLicenseKey(
      'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  );
  ModuleRegistry.registerModules(AllModules);

Why i'm getting this warning in the console and how i can get rid of it ?

ag-Grid: You are mixing modules (i.e. @ag-grid-community/core) and packages (ag-grid-community) - you can only use one or the other of these mechanisms.

Answer 1

You are getting the warning because quite simply, you are mixing modules and packages. The library ag-grid-community contains everything in ag-Grid community whereas @ag-grid-community/core contains the core items from ag-Grid community. You need to install one or the other, depending on whether you are using modules or packages.

From ag-Grid:

There are two main ways to install ag-Grid - either by using packages , or by using modules. packages are the easiest way to use ag-Grid, but by default include all code specific to each package, whereas modules allow you to cherry pick what functionality you want, which will allow for a reduced overall bundle size.

Take a look at the documentation around packages and modules here.