Home > Mobile >  Material UI: "Failed prop type: isValidElement is not a function" when using mui Accordion
Material UI: "Failed prop type: isValidElement is not a function" when using mui Accordion

Time:01-09

The other day I started having problems with MUI:s Accordion component. My next.js app throws a bunch of errors about Failed prop type: isValidElement is not a function. The error seems to originate from different MUI Accordion components; AccordionSummary, Collapse in Accordion, Paper in Accordion and ButtonBase in AccordionSummary. For instance:

next-dev.js?3515:20 Warning: Failed prop type: isValidElement is not a function
at AccordionSummary (webpack-internal:///./node_modules/@mui/material/AccordionSummary/AccordionSummary.js:114:82)

I've tried to upgrade MUI to the latest versions: "@mui/icons-material": "^5.11.0", "@mui/material": "^5.11.3", and have also stripped down the complexity of my usage to a bare minimum example from the docs:

import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Typography,
} from '@mui/material'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'

// ...

<Accordion>
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls='panel1a-content'
      id='panel1a-header'
    >
      <Typography>Accordion 1</Typography>
    </AccordionSummary>
    <AccordionDetails>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        malesuada lacus ex, sit amet blandit leo lobortis eget.
      </Typography>
    </AccordionDetails>
  </Accordion>

// ...

But I still get the same error. The error obviously disappears once I remove all instances of Accordion.

I also tried to reproduce the issue in a brand new next.js app, but it was working fine there. This means that it's likely something related to my setup, but I'm having trouble figuring out what... Does anyone have any pointers on what to try next in order to debug this issue?

Thanks in advance!

CodePudding user response:

I deleted the .next folder as suggested by hakeri and performed a new build - and it worked! So probably something related to next.js's cache.

  • Related