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?

Diedra

Are you tried to reinstall @material-ui/core or restart web-server? :D – Virendra

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

Bary

Answer 2

Install Material UI Core

npm i @material-ui/core

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

Then, its working. Have fun!!

Malvoisie

Or npm install @material-ui/core@latest – Preparedness

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 :)

Bloater

Keep in mind many of those components were already installed. The new ones I installed based on the error are: the 3 materialize ones, avatar, and clsx. Then npm update brought these two react components – Bloater

Yes It's working good after I have updated @material-ui/core": "^4.11.0", – Bastille

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';

Ky

Answer 5

Material-UI Accordion (formerly ExpansionTable) component won't import because it's has been renamed, so its update issue, so to update material ui and other packages in your folder run the command

npm outdated

The outdated dependencies will be listed out

npm update

or

npm update  "react" "react-dom"

to update specific package, after that run this command to install specific package

npm install react@latest react-dom@latest

or

npm install

to install all packages

Truelove