为什么 React-bootstrap 中的 Navbar 组件没有导入到我的 NextJS 应用程序中？

Question

我目前正在 [email protected] 应用程序上构建一个项目，版本为 React v 18.3.1。我已经安装了react-bootstrap 2.10.6和bootstrap 5.3。但是，我遇到了一个问题，使用导航栏组件会出现此错误：

[ Server ] 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功能正常，并且所有内容都已正确导入。版本是兼容的。唯一的问题在于导航栏组件，该组件没有被导入。

谁能告诉我问题是什么以及如何解决它？

我已经通过在我的下一个应用程序的 page.js 上运行此代码来确认 Boostrap 的功能：

import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

export default function Home() {
  return (
    <div>
      <Button variant="primary">Test React-Bootstrap</Button>
    </div>
  );
}

效果非常好。我还通过 component/Header.js 页面上的 console.log(Navbar) 确认 Navbar 没有被导入。它呈现为“null”。

我希望它能像在另一个 React 项目中一样工作，在那里它工作得很好，但那并没有发生。重申一下，相同的代码在之前的 React 项目中运行得很好。这是该特定组件的 NextJS 问题。

Answer 1

由于这个react-bootstrap问题，我无法使用我的react-bootstrap项目转移到Next 15，如果我理解正确的话，这与在底层使用部分/全部React 19的Next 15有关。您在 Next 14 上遇到同样的错误吗？我假设您的失败代码与您所展示的其他组件正常工作的证据类似，例如：

import { Navbar } from "react-bootstrap";