Home > Back-end >  ENOENT on npm start error. Why am I getting this error and why is it looking for "My Pictures&q
ENOENT on npm start error. Why am I getting this error and why is it looking for "My Pictures&q

Time:11-20

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?

Image of the import and error in console

When the import is commented out, the error disappears:

enter image description here

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/

CodePudding user response:

Because it is renamed to C:\Users\<user>\Pictures since Windows 8?

BTW, why are you trying to access images outside your project directory? It works but it will be a nightmare to manage.

e.g. What are you going to do when you have to push the code to GitHub? Include C:\Users\<user>\Pictures to your source code?

CodePudding user response:

I believe this is an issue arising from incompatibility between @material-ui/core and @mui/x-data-grid. Thanks for bringing this to my attention @Matthew Kwong!

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

Please let me know if I have overlooked anything!

  • Related