Next.js 18 + React-Bootstrap 开发中遭遇「React.jsx: type is invalid」错误的求助

我最近在Next.js项目里重新用起了React 18和react-bootstrap，但遇到了一个搞不懂的错误，实在头大。错误提示是：

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.

我觉得自己的react-bootstrap模块导入是没问题的啊，比如下面这样：

Navigation.tsx #

import React from 'react'
import { 
    Navbar,
    Nav,
    NavDropdown,
    NavbarBrand,
    NavbarToggle,
    NavLink,
    NavbarCollapse,
    Container
} from 'react-bootstrap';
// 我也试过下面这种单独导入的方式，但还是报同样的type invalid错误
// 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">
                            // 这里它就开始抱怨NavDropdown.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;

我怀疑是不是这种带点的语法（比如NavDropdown.Item）的问题？但看官方文档明明是允许这么用的啊。到底哪里错了，或者我在导入的时候漏了什么？

下面是我的package.json文件和组件引用的地方：

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";
// 也试过下面这种路径导入，没区别
// 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>
  );
}

编辑说明：麻烦不要把这个问题标记为重复，现有的重复问题链接根本解决不了我的情况，不过已经有人给了一个对我有效的答案了。

备注：内容来源于stack exchange，提问作者DonDavid12