React Bootstrap Accordion not working with NextJS

Question

I have moved my application from CRA to CNA. Everything is working like a charm but the Bootstrap Accordion is not working at all. I have tried all possible ways but still not able to figure out a way to fix this.

Error Message:

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.

I have tried importing it in multiple ways but nothing works.

import Accordion from 'react-bootstrap/Accordion';

import {Accordion} from 'react-bootstrap/Accordion';

import Accordion from 'react-bootstrap';

import {Accordion} from 'react-bootstrap';

If am using import Accordion from 'react-bootstrap';

Error Message:

Otherwise

Thanks in advance :)

Answer 1

I'm not sure, did you tried this?

import Accordion from 'react-bootstrap';
import Item from 'react-bootstrap';

OR

import { Accordion , Item } from 'react-bootstrap';

Answer 2

import { Accordion, Card } from "react-bootstrap";

<Accordion>
    <Card>
      <Accordion.Toggle as={Card.Header} eventKey="0">
        TAB 1
      </Accordion.Toggle>

      <Accordion.Collapse eventKey="0">
        <Card.Body>This is first tab body</Card.Body>
      </Accordion.Collapse>
    </Card>

    <Card>
      <Accordion.Toggle as={Card.Header} eventKey="1">
        TAB 2
      </Accordion.Toggle>

      <Accordion.Collapse eventKey="1">
        <Card.Body>This is second tab body</Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>

Answer 3

The issue you are likely experiencing is that of a version difference between react-bootstrap installed in your app, and the documentation your using on their webpage. The webpage https://react-bootstrap.github.io defaults to version v2.0.0-rc.0 (Bootstrap 5.1) of their documentation (you can see this in next to their github and discord icons, top right...) you need to change the documentation to v1.6.1 (Bootstrap 4) for it to list the correct documentation on the components.

for example v2.0.0-rc.0 you create an accordion as so:

<Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="0">
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

Whereas in the previous set of documentation its as:

<Accordion defaultActiveKey="0">
  <Card>
    <Card.Header>
      <Accordion.Toggle as={Button} variant="link" eventKey="0">
        Click me!
      </Accordion.Toggle>
    </Card.Header>
    <Accordion.Collapse eventKey="0">
      <Card.Body>Hello! I'm the body</Card.Body>
    </Accordion.Collapse>
  </Card>
</Accordion>

The reason your getting the error specifically is because Accordion.Item is returning a string, when the component Accordion.Item doesnt exist, react thinks your exporting some custom type code, and since it cant find that code it returns undefined when in reality its expecting a string

Long story short, change the documentation and youll get your answer, or conversely you can choose to upgrade your version of react-bootstrap and bootstrap and itll do the same thing, just make sure your using the correct documentation to build your components.