Search code examples
reactjsmaterial-uicss-frameworks

Missing components in Material UI


Every component of Material UI is working fine but when I tried to use ImageList and ImageListItem for the first time I got this error

ERROR in ./client/src/user-imageboard.js 3:0-52
Module not found: Error: Can't resolve '@material-ui/core/ImageList' in '/home/carlos/spiced/spiced-final-project/client/src'
 @ ./client/src/profile.js 13:0-47 58:26-40
 @ ./client/src/app.js 17:0-32 43:35-42
 @ ./client/src/start.js 10:0-24 25:32-35

ERROR in ./client/src/user-imageboard.js 4:0-60
Module not found: Error: Can't resolve '@material-ui/core/ImageListItem' in '/home/carlos/spiced/spiced-final-project/client/src'
 @ ./client/src/profile.js 13:0-47 58:26-40
 @ ./client/src/app.js 17:0-32 43:35-42
 @ ./client/src/start.js 10:0-24 25:32-35

I checked on the node_modules folder and it's not there. I tried to delete the folder @material-ui/core and reinstalled again and still not there.

The component is nowhere to find it. Version of material-ui is @material-ui/core": "^4.11.2"

This is my component where are imported and nested.

import ImageList from '@material-ui/core/ImageList';
import ImageListItem from '@material-ui/core/ImageListItem';

const UserImageBoard = () => {
    return (
        <ImageList variant="masonry" cols={3} gap={8}>
            <ImageListItem>
                <img src="/default.jpg"> </img>
            </ImageListItem>
            <ImageListItem>
                <img src="/default.jpg"> </img>
            </ImageListItem>
            <ImageListItem>
                <img src="/default.jpg"> </img>
            </ImageListItem>
        </ImageList>
    );
};

export default UserImageBoard;

Solution

  • There doesnt appear to be an ImageList or ImageListItem component in 4.11.2, which is currently the latest release.
    You would need @material-ui/core@next which is currently 5.0.0-alpha.23 and does include those new components seen here