ENOENT on npm start error. Why am I getting this error and why is it looking for "My Pictures" directory?

Question

I am attempting to use MUI's Data Grid component in my React project. I have installed the package using $npm i @mui/x-data-grid. When I import DataGrid into my React component and run $npm start, I get the following ENOENT error. Anyone know why?

When the import is commented out, the error disappears:

Steps I've taken to resolve the issue:

1. Restart VS Code
2. Restart my computer
3. Run the "hotfix" from https://www.codejourney.net/2021/04/how-to-fix-npm-err-enoent-enoent-no-such-file-or-directory-rename/

Answer 1

I believe this is an issue arising from incompatibility between @material-ui/core and @mui/x-data-grid.

There are a few possible solutions that I have found:

1. Use Webpack aliases to circumvent the problem via https://githubmemory.com/repo/mui-org/material-ui-x/issues/2527
2. Install an older version of MUI Data Grid: https://github.com/mui-org/material-ui-x
3. Go with a third party option for the data grid component. I have decided to proceed with the following: https://github.com/adazzle/react-data-grid/blob/main/README.md