11
votes

Le composant Material-UI Accordion (anciennement ExpansionTable) ne sera pas importé

Je construis une application en utilisant Material-UI , jusqu'ici tout va bien. J'essaie de créer un composant à l'aide d'un composant Accordion , mais j'obtiens une erreur en essayant de l'importer:

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;

J'ai essayé de l'importer à la fois via une importation par défaut et nommée, mais le résultat est le même.

le composant:

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

Tous mes autres composants fonctionnent correctement avec les composants Material-UI importés.

Suis-je en train de manquer quelque chose que je fais mal? Quelqu'un a-t-il rencontré un tel problème?

reactjs import material-ui

1 commentaires

Avez-vous essayé de réinstaller @material-ui/core ou de redémarrer le serveur Web? :RÉ

5 Réponses :

17
votes

ExpansionPanel a été renommé Accordion . Avec votre erreur, il semble que vous utilisiez la version 4.10.2 (ou inférieure) de material-ui-core.

Utilisez la version 4.11.0 ou supérieure de material-ui-core .

Démonstration fonctionnelle de votre code dans codesandbox

0 commentaires

6
votes

Installer Material UI Core

npm i @material-ui/core

Donc, ce sera @material-ui/core@4.11.0

Ensuite, son fonctionnement. S'amuser!!

1 commentaires

Ou npm install @material-ui/core@latest

0
votes

Le composant Material-UI Accordion (anciennement ExpansionTable) ne sera pas importé car il a été renommé, donc son problème de mise à jour, donc pour mettre à jour Material Ui et d'autres packages dans votre dossier, exécutez la commande

npm install

Les dépendances obsolètes seront répertoriées

mise à jour npm

npm install react@latest react-dom@latest

pour mettre à jour un package spécifique, puis exécutez cette commande pour installer un package spécifique

npm update  "react" "react-dom"

npm outdated

pour installer tous les packages

0 commentaires

0
votes

J'ai eu essentiellement le même problème. L'erreur était:

"Impossible de résoudre '@ material-ui / icons / ExpandMore'"

Après avoir installé les éléments suivants:

"@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"

J'ai exécuté la npm update et TOUT ÉTAIT BIEN :)

1 commentaires

Gardez à l'esprit que bon nombre de ces composants étaient déjà installés. Les nouveaux que j'ai installés en fonction de l'erreur sont: les 3 se matérialisent, avatar et clsx. Ensuite, la mise à jour npm a apporté ces deux composants de réaction

0
votes

Le nom d' Accordion a été changé en ExpansionPanel récemment, alors importez comme ceci:

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

0 commentaires