AccordionBody state issue.

[luukee]

Thought I should mention this... Importing and using AccordionBody gives this Unhandled Runtime Error:

I can import Accordion & AccordionHeader and use them in the markup, but when I import AccordionBody and use it the above issue occurs.

Console error output:

react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState (react.development.js:1622:1)
    at LazyMotion (index.js:7530:1)
    at renderWithHooks (react-dom.development.js:15486:1)
    at mountIndeterminateComponent (react-dom.development.js:20103:1)
    at beginWork (react-dom.development.js:21626:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27490:1)
    at performUnitOfWork (react-dom.development.js:26596:1)
    at workLoopSync (react-dom.development.js:26505:1)
    at renderRootSync (react-dom.development.js:26473:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25777:1)
    at workLoop (scheduler.development.js:266:1)
    at flushWork (scheduler.development.js:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)

Example component usage:

import React, { useState } from 'react'
import Headbar from '../components/Headbar'
import ReportsSection from './ReportsSection'
import TagGraph from "./TagGraph"
import { useAuth } from '../context/AuthContext'
import globalStyles from '../styles/globalStyles'
import { Accordion, AccordionHeader, AccordionBody } from '@material-tailwind/react'

const Home = ({newReportSubmitted, handleNewReportSubmit}) => {
  const [search,setSearch] = useState("")
  const [open,setOpen] = useState(false)
    const handleOpen = (value) => setOpen(open === value ? 0 : value);

  const { user,  customClaims } = useAuth()

  return (
    <div className="w-full h-full flex flex-col py-5">
        <Headbar search={search} setSearch={setSearch} customClaims={customClaims} user={user} />
        <Accordion open={open === 1}>
          <AccordionHeader onClick={() => handleOpen(1)}>Toggle</AccordionHeader>
          <AccordionBody>body</AccordionBody>
        </Accordion>
        <div className={globalStyles.page.wrap} id="scrollableDiv">
          <TagGraph/>
          <ReportsSection search={search} newReportSubmitted={newReportSubmitted} handleNewReportSubmit={handleNewReportSubmit} />
        </div>
    </div>
  )
}

export default Home

Packages:

"@material-tailwind/react": "^2.1.9",
"tailwindcss": "^3.4.3",
"next": "^14.2.3",
"node": "^21.2.0",
"react": "^18.3.0",

** Similar issue with the Collapse element.

[luukee]

Figured it out myself. My project was using two different versions of react. To fix:

First check for multiple versions by running yarn list react. This gave me:

├─ @material-tailwind/react@2.1.9
│  └─ react@18.2.0
└─ react@18.3.1

So I added resolutions to my package.json:

  "resolutions": {
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  }

Reinstalled node modules:

rm -rf node_modules yarn.lock
yarn install

Good to go.