Search code examples
javascriptreactjsreact-nativetwitter-bootstrapnext.js

Nextjs: Getting React type is Invalid

I've restarted using React 18 and react-bootstrap with Next.js, but I'm not understanding the error it is giving out to me. The error is:

React.jsx: 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.

This doesn't make any sense to me since I imported the react-bootstrap modules properly like below.

Navigation.tsx


import React from 'react'
import { 
    Navbar,
    Nav,
    NavDropdown,
    NavbarBrand,
    NavbarToggle,
    NavLink,
    NavbarCollapse,
    Container
} from 'react-bootstrap';
// Tried the imports as below but still giving me the type is invalid error
// import NavDropdown from 'react-bootstrap/NavDropdown';
// import Container from 'react-bootstrap/Container';
// import Nav from 'react-bootstrap/Nav';

console.log(Navbar)
const Navigation = () => {
    return (
        <React.Fragment>
            <Navbar expand="lg" className="bg-body-tertiary">
                <Container>
                    <NavbarBrand>React-Bootstrap</NavbarBrand>
                    <NavbarToggle aria-controls="basic-navbar-nav" />
                    <NavbarCollapse id="basic-navbar-nav">
                        <Nav className="me-auto">
                            <NavLink >Home</NavLink>
                            <NavLink >Link</NavLink>
                            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                            // Complains on NavDropdowon.Item
                            <NavDropdown.Item >Action</NavDropdown.Item>
                            <NavDropdown.Item >
                                Another action
                            </NavDropdown.Item>
                            <NavDropdown.Item >Something</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item >
                                Separated link
                            </NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </NavbarCollapse>
                </Container>
            </Navbar>
        </React.Fragment>
    )
}

export default Navigation;

I conclude that it doesn't like the . that comes after (EX: NavDropdown.Item). I see in the documentation that there should be no issue using that syntax. How do I fix this or what am I missing on the imports?

Here is my package.json file and where it is being referenced

package.json


{
  "name": "my-website",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "next": "15.0.3",
    "react": "^18.3.1",
    "react-bootstrap": "^2.10.9",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.3",
    "typescript": "^5"
  }
}

src/app/layout.tsx


import type { Metadata } from "next";
import Navigation from "../components/Navigation";
//tried this way doesn't make a difference
import Navigation from "@/components/Navigation";
import "./globals.css";

export const metadata: Metadata = {
  title: "Hey title tag",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <Navigation />
        {children}
      </body>
    </html>
  );
}

EDIT

Please do not flag this as duplicate as the currently duplicate link does not help me in this case, however, an answer has been given that actually works for my use case.

Solution

  • This is a known bug in next.js. Using dot notation components in server side components throw this error. In your case it is not just NavDropdown.Item, even the NavDropdown.Divider is throwing this error. If you go through the linked Github issue, you will notice that many libraries which use dot notation components have the same issue.

    Solution:

    You need to use the "use client" directive wherever you are using the dotted components. So add it to the top of your Navigation.tsx file.

    If these components are part of larger server side components, try to organize your component tree by interleaving the server and client components.