'Module not found: Error: Can't resolve '@material-ui/data-grid

I am new to react and when I add material ui data table to my salesTable.js, I have got an error like below.

ERROR in ./src/SalesTable/SalesTable.js 5:0-50
Module not found: Error: Can't resolve '@material-ui/data-grid' in 'D:\Pract
resolve '@material-ui/data-grid' in 'D:\Practice_react\react_sama\src\SalesT
  Parsed request is a module
  using description file: D:\Practice_react\react_sama\package.json (relativ
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      D:\Practice_react\react_sama\src\SalesTable\node_modules doesn't exist
      D:\Practice_react\react_sama\src\node_modules doesn't exist or is not 
      looking for modules in D:\Practice_react\react_sama\node_modules
        single file module
          using description file: D:\Practice_react\react_sama\package.json 
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Practice_react\react_sama\node_modules\@material-ui\data-gr
            .web.mjs
            ....
             



Solution 1:[1]

You can install additional packages with the following syntax:

npm install @mui/x-data-grid

The grid has a peer dependency on one MUI component. If you are not already using MUI in your project, you can install it with:

npm install @mui/material

You can read the documentation from this Data Grid - Getting started

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fuad Zein