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

user_12362394 0
Viewed 11370

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?

material-ui reactjs import
5 Answers
user_132073940

Install Material UI Core

npm i @material-ui/core

So , it will be @material-ui/core@4.11.0

Then, its working. Have fun!!

user_118418680

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

user_113038400

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

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

user_124903860
Related