react-bootstrap 手风琴未加载

Question

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.

Answer 1

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

Answer 2

Reason for the problem

The problem is that you're using a snippet from the latest v2.0.0 while you have version ^1.6.1 installed.

Solution 1

Upgrade the current version of react bootstrap to match the corresponding version for bootstrap. version 2.0.0 Accordion Docs

npm uninstall react-bootstrap
npm i react-bootstrap@2.2.0

Solution 2

Downgrade the current version of bootstrap to match the corresponding version for react bootstrap and use the snippet from the version 1.6.1 Accordion Docs

npm uninstall bootstrap
npm i bootstrap@4.6.0

bootstrap & react-bootstrap compatibility table