reactjsreact-bootstrapbootstrap-5

react-bootstrap Accordion not loading

I am trying to use react-bootstrap with Bootstrap 5. I want to use Accordion in one of my pages. For that I just copied the structure from this page-> https://react-bootstrap.netlify.app/components/accordion/. But when I open the page, browser shows this error-

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Questions`.

Here is my code which is using this component

import Accordion from 'react-bootstrap/Accordion';

const Questions = () => (
    <Accordion defaultActiveKey="0" flush>
        <Accordion.Item eventKey="0">
            <Accordion.Header>Question #1</Accordion.Header>
            <Accordion.Body>
                Answer to the Question #1
            </Accordion.Body>
        </Accordion.Item>
        <Accordion.Item eventKey="1">
            <Accordion.Header>Question #2</Accordion.Header>
            <Accordion.Body>
                Answer to the Question #2
            </Accordion.Body>
        </Accordion.Item>
    </Accordion>
);


export default Questions;

Other details:

  1. "bootstrap": "^5.0.2"
  2. "react": "^17.0.2"
  3. "react-bootstrap":"^1.6.1"

Did I miss anything while importing/exporting the component? TIA.

Solution

  • I fixed this problem by replacing react-bootstrap v1.6.1 with the latest v2.0.0beta -> https://www.npmjs.com/package/react-bootstrap/v/2.0.0-beta.0

    npm uninstall react-bootstrap
npm i react-bootstrap@2.0.0-beta.0

    I hope this will solve your problem