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

user_14673521 0
Viewed 14828

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.

material-ui reactjs frameworks user-interface
4 Answers

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 MUI v5, so you have to install it, or you can be used with MUI 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 MUI Core (includes Material UI) v5 and can be used with MUI Core v4 with some additional steps. Most breaking changes are renaming of CSS classes or variables to improve the consistency of the grid.

You may be wondering, but what should I do if I use mui v4 now? According to our actual 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 MUI 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 MUI Core 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 MUI Core v5 and configure it to keep MUI Core v4 running alongside.

user_125257440

npm i @mui/x-data-grid install this one first

user_123912010

Module not found: Can't resolve '@mui/x-data-grid'

Means you don't have this module installed

If you find this error for any other modules meaning is the same you have to install that specific module

npm install @mui/x-data-grid
user_87253950

Even if you have installed the dependency @mui/x-data-grid VS Code may nag you with this error, the solution is to restart the VS Code.

user_73563550
Related