javascriptreactjsreact-nativetwitter-bootstrapnext.js

Reputation: 189

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.

Upvotes: 2

Answers (3)

Nemish Bhayani

Reputation: 1

React-Bootstrap: "Type is invalid" Error with Navbar Components

I'm using React 18 and react-bootstrap, but I'm encountering the following error:

Error: 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.

I have imported the React-Bootstrap components as shown below in Navigation.tsx:

import React from "react";
import { 
    Navbar,
    Nav,
    NavDropdown,
    NavbarBrand,
    NavbarToggle,
    NavLink,
    NavbarCollapse,
    Container
} from "react-bootstrap";

Even when I try the alternative import syntax:

import NavDropdown from "react-bootstrap/NavDropdown";
import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";

The error persists. Specifically, it fails when using NavDropdown.Item.

What I Tried

Checked the package.json to ensure react-bootstrap is correctly installed:

"dependencies": {
  "bootstrap": "^5.3.3",
  "next": "15.0.3",
  "react": "^18.3.1",
  "react-bootstrap": "^2.10.9",
  "react-dom": "^18.3.1"
}

Attempted named and default imports for React-Bootstrap modules.
Ensured react-bootstrap is correctly installed by running:
```
npm install react-bootstrap bootstrap
```
Verified the issue occurs in layout.tsx, where I import Navigation:
```
import Navigation from "@/components/Navigation";
```

Solution

The issue was caused by incorrect imports. Some of the component names used do not exist in react-bootstrap. The correct import names are:

Incorrect Import	Correct Import
`NavbarBrand`	`Navbar.Brand`
`NavbarToggle`	`Navbar.Toggle`
`NavbarCollapse`	`Navbar.Collapse`
`NavLink`	`Nav.Link`

Fixed Code:

import React from "react";
import { 
    Navbar,
    Nav,
    NavDropdown,
    Container
} from "react-bootstrap";

const Navigation = () => {
    return (
        <Navbar expand="lg" className="bg-body-tertiary">
            <Container>
                <Navbar.Brand>React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="#">Home</Nav.Link>
                        <Nav.Link href="#">Link</Nav.Link>
                        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                            <NavDropdown.Item href="#">Action</NavDropdown.Item>
                            <NavDropdown.Item href="#">Another action</NavDropdown.Item>
                            <NavDropdown.Item href="#">Something</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item href="#">Separated link</NavDropdown.Item>
                        </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
};

export default Navigation;

Summary of Fixes

Use correct component names (e.g., Navbar.Brand, Nav.Link, Navbar.Collapse)
Ensure react-bootstrap is installed
Use correct syntax for NavDropdown.Item

After making these changes, the error was resolved.

Upvotes: 0

Raghavendra N

Reputation: 5496

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.

Upvotes: 3

Ahmad Gulzar

Reputation: 127

I think you are missing few Exports for example on the React Bootstrap website it says

import Container from 'react-bootstrap/Container';

But you are doing it like

import { 
    Navbar,
    Nav,
    NavDropdown,
    NavbarBrand,
    NavbarToggle,
    NavLink,
    NavbarCollapse,
    Container
} from 'react-bootstrap';

Have you tried using the same Example given on the React Bootstrap Webiste https://react-bootstrap.netlify.app/docs/components/navbar

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function Navigation() {
  return (
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Navigation;

Let me know if you have tried this already This Error is probably from the imports you are using here.