Home > Net >  npm cannot find material-ui module even though it is correctly installed
npm cannot find material-ui module even though it is correctly installed

Time:01-23

I installed the package following the instructions on the material-ui website:

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

And verified the module is correctly installed using npm ls

npm ls
[email protected] /home/gilles/web-dev/pwiki-frontend
├── ...
├── @emotion/[email protected]
├── @mui/[email protected]
├── @mui/[email protected]
├── ...

I include the components I want to use from the module in index.js as follows (from their demo):

import TreeView from '@mui/lab/TreeView';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import TreeItem from '@mui/lab/TreeItem';

When I start the development server with npm start I get the following output:

Module not found: Error: Can't resolve '@mui/lab/TreeView' in '/path/to/root-dir/src'
ERROR in ./src/index.js 11:0-41
Module not found: Error: Can't resolve '@mui/lab/TreeView' in '/path/to/root-dir/src'

ERROR in ./src/index.js 12:0-60
Module not found: Error: Can't resolve '@mui/icons-material/ExpandMore' in '/path/to/root-dir/src'

ERROR in ./src/index.js 13:0-64
Module not found: Error: Can't resolve '@mui/icons-material/ChevronRight' in '/path/to/root-dir/src'

ERROR in ./src/index.js 14:0-41
Module not found: Error: Can't resolve '@mui/lab/TreeItem' in '/path/to/root-dir/src'


I have tried export NODE_PATH using the relative path as well as the global path, but neither worked.

export NODE_PATH=./node_modules
export NODE_PATH=/path/to/root_dir/node_modules

What am I doing wrong?

I thought that a simple 'npm install` should be enough to get everything working correctly. I tried a different module before material-ui and I was having the same issue with that module.

CodePudding user response:

You are using the TreeView component from the @mui/lab dependency, which has components that are not yet ready to be part of the main @mui/material dependency as you can see here.

To fix that, add the dependency to your package.json running npm install @mui/lab.

The same is happening to the icons that you are trying to use, you'll need to add the @mui/icons-material to use them.

  • Related