React Bootstrap Accordion Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

Question

I am struggling with my first bootstrap code.

I want to add an Accordion using react-bootstrap code from here.

I think I also already have imported the correct library.

But I still have 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."

Here is my code if anyone can help, thanks a lot ^^ Hugo

import React, { Component } from "react";
import { Accordion } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";

export class Maturite extends Component {
  render() {
      return (
        <div>
                  <div style={{marginTop: '150px'}}></div>

                  {/* This is the 1st method from react bootstrap for an Accordion which is NOT working for me  */}
                  <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header>Accordion Item #1</Accordion.Header>
                        <Accordion.Body>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        </Accordion.Body>
                    </Accordion.Item>
                    </Accordion>

                    {/* This is a 2nd method for an Accordion which is working for me  */}
                    <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>
              </div>
      );
  }
}

export default Maturite;

import React, { Component } from "react";
import { Accordion } from 'react-bootstrap';
import Card from "react-bootstrap/Card";
import "bootstrap/dist/css/bootstrap.min.css";

export class Maturite extends Component {
  render() {
      return (
        <div>
                  <div style={{marginTop: '150px'}}></div>

                  {/* This is the 1st method from react bootstrap for an Accordion which is NOT working for me  */}
                  <Accordion>
                    <Accordion.Item eventKey="0">
                        <Accordion.Header>Accordion Item #1</Accordion.Header>
                        <Accordion.Body>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                        </Accordion.Body>
                    </Accordion.Item>
                    </Accordion>

                    {/* This is a 2nd method for an Accordion which is working for me  */}
                    <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>
              </div>
      );
  }
}

export default Maturite;

Answer 1

What version of Bootstrap are you importing?

The layout of the component that you're using that doesn't work (using Accordion.Header / .Body) is for the latest beta version of bootstrap ( Bootstrap 5.0 / v2.0.0-beta.4 ). If you're using Bootstrap 4.0 (v1.6.1) then the component has a different format, using Cards (the kind that's working for you).