Material-UI Accordion (formerly ExpansionTable) component won't import

Question

I am building an app using Material-UI, so far so good. I am trying to build a component using an Accordion component, but i am getting an error when trying to import it:

Module not found: Can't resolve '@material-ui/core/Accordion' in [path]

I have tried to import it both through a default and named imports, but the result is the same.

the component:

import React from 'react';
//  import {
//     Accordion,
//     AccordionSummary,
//     AccordionDetails
//  } from '@material-ui/core';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';


const JobCard = () => {

    return(
        <Accordion expanded={true}>
            <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
            >
                test
            </AccordionSummary>
            <AccordionDetails>
                test
            </AccordionDetails>
        </Accordion>
    );
}

export default JobCard;

All my other components are working fine with imported Material-UI components.

Am i missing something here that i am doing wrong? Did anyone encounter such an issue?

Answer 1

ExpansionPanel has been renamed to Accordion . With your error, it looks like you are using material-ui-core version 4.10.2 (or below).

Use material-ui-core version 4.11.0 or higher.

Working demo of your code in codesandbox

Answer 2

Install Material UI Core

npm i @material-ui/core

So , it will be @material-ui/[email protected]

Then, its working. Have fun!!

Answer 3

I had basically the same issue. Error was:

"Can't resolve '@material-ui/icons/ExpandMore'"

After installing the following:

"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"avatar": "^0.1.0",
"clsx": "^1.1.1",
"jquery": "^3.5.1",
"material-ui": "^0.20.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-ga": "^2.7.0",
"react-scripts": "1.0.17"

I ran npm update and ALL WAS GOOD :)

Answer 4

The name of Accordion has been changed to ExpansionPanel lately, So import like this:

import Accordion from '@material-ui/core/ExpansionPanel';
import AccordionSummary from '@material-ui/core/ExpansionPanelSummary';
import AccordionDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';