Error trying to use bootstrap in next.js application

Question

I am starting to use React/Next.js and I have got the error:

TypeError: Cannot read properties of undefined (reading 'Item')

When trying to execute the following code in a Next.js application.

The error is due to the header code that is in components->Menu.js file.

I added the menu code after creating the application with npx create-next-app and installing reactstrap

import MyApp from 'next';

import { Nav, Navbar, NavDropdown } from 'reactstrap'

const Menu = () => {
    return (
        <div>
            <Navbar bg="" expand="lg">
                <Navbar.Brand href="/">
                    <h1>Logo</h1>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
                        <Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
                        <Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
                        <NavDropdown title="Social" id="basic-nav-dropdown">
                            <NavDropdown.Item href="https://protonmail.com/" title="Proton" target="_blank">Proton</NavDropdown.Item>
                            <NavDropdown.Item href="https://www.deepl.com/translator" title="Deepl" target="_blank">Deepl</NavDropdown.Item>
                            <NavDropdown.Item href="http://duckduckgo.com/" title="DuckDuckGo" target="_blank">DuckDuckGo</NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div>
    )
}

export default Menu

If I take the NavDropdown out, I get the following 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.

(The code without NavDropdown is bellow)

<Navbar bg="" expand="lg">
                <Navbar.Brand href="/">
                    <h1>Logo</h1>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link title="Página Inicial" href="/">Home</Nav.Link>
                        <Nav.Link title="Quem Somos" href="/about">About Us</Nav.Link>
                        <Nav.Link title="Fale conosco" href="/contact">Contact</Nav.Link>
                        
                    </Nav>
                </Navbar.Collapse>
            </Navbar>

I am calling the Menu component in the code bellow:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'reactstrap';
import { Nav, Navbar, NavDropdown } from 'reactstrap'
import Menu from '../components/Menu'


export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      
      <Menu></Menu>

      <div className={styles.first}></div>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/canary/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

I got the Menu code from this code: https://github.com/webdeveloperbrasil/next-aula-002

**If I remove the Menu from the code, it works fine.

looking at the documentation, it should be DropDownItem....6-4-0--reactstrap.netlify.app/components/dropdowns Also stated here: 6-4-0--reactstrap.netlify.app/components/navbar — kazmi066
Get the error TypeError: Cannot read properties of undefined (reading 'DropDownItem') ... even without the dropdown fields I get it wrong... — Siqueira