Module not found: Can't resolve '@mui/x-data-grid' in 'C:\Users\Syndicate\Documents\GitHub\simserp\sims\src\components\modules\country'

Question

enter image description here

I was working on the "@material-ui/core": "^4.12.3" version, and now the version is changed. I am looking the way for :

import { GridOverlay, DataGrid } from '@mui/x-data-grid';

But it is not working. can anyone help me in setting up both the version and documentation for the older version so that I go with both version in my application.

Answer 1

TL;DR

Step 1.

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Step 2.

// with npm
npm install @mui/x-data-grid

// with yarn
yarn add @mui/x-data-grid

Step 3.

import { DataGrid } from '@mui/x-data-grid'

---

Long Text

Our company also encountered the same problem when migrating, and finally solved it perfectly.

The reason for the above error is because @mui/x-data-grid is dependent on Material UI v5, so you have to install it, or you can be used with Material UI v4 with some additional steps.

This is a reference guide for upgrading your site from MUI X v4 to v5. MUI X v5 is fully compatible with Material UI v5 and MUI System v5 and can be used with Material UI v4 and MUI System v4 with some additional steps. Most breaking changes are renaming of CSS classes or variables to improve the consistency of the data grid.

• Refer to MUI X doc

You may be wondering, but what should I do if I use Material UI v4 now? According to our experience and the information provided by the official Material, it is no problem to have the v4 package and the v5 package at the same time, so you can install the Material UI v5 first and let @mui/x-data-grid can be used, waiting for the spare time to migrate the v4 components to the v5 usage.

We strongly recommend you migrate Material UI to v5 when using MUI X v5. However, this might not be possible, depending on the complexity of the application. The alternative is to install Material UI v5 and configure it to keep Material UI v4 running alongside.

• Refer to MUI X doc