React 错误：元素类型无效：需要一个字符串（对于 built-in 组件）或一个 class/function（对于复合组件）但得到：未定义

Question

我正在用 React 开发一个项目。（这是学习项目。我是 React 的新手）我正在使用 React-Bootstrap for UI。我现在正在设计导航栏。我想制作一个在 md 断点之前有效的 offcanvas，但我收到标题中提到的错误。我无法尝试任何事情，因为我不完全理解错误。我从 HomepageNavbar 组件收到错误。我也在那个组件里写了我的代码。

首先，我设计了经典的 Navbar 并且它起作用了。然后我添加了Offcanvas，我得到了错误。

正在运行：

<Navbar bg="transparent" variant="light">
         <Container className="justify-content-center justify-content-md-between">
             <Col md={4}>
                 <Navbar.Brand href="#home">
                     <img
                         alt=""
                         src={logo}
                         className="d-inline-block align-top"
                     />
                 </Navbar.Brand>
             </Col>
             <Col md={8} className="text-end text-xl-center">
                 <Nav
                     className="d-none d-md-block"
                     color="black"
                     style={{
                         fontSize: '.9rem',
                         fontWeight: 'bold',
                     }}
                 >
                     <Nav.Link className="d-inline" href="#home">Eğitim Paketlerimiz</Nav.Link>
                     <Nav.Link className="d-inline" href="#features">Örnek Videolar</Nav.Link>
                     <Nav.Link className="d-inline" href="#pricing">Yorumlar & Başarılarımız</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#x">Yardım</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#y">Biz Kimiz</Nav.Link>
                     <Nav.Link className="d-none d-xl-inline" href="#z">Bize Ulaşın</Nav.Link>
                 </Nav>
             </Col>
         </Container>
</Navbar>

它不再工作了，我得到了标题中提到的错误：

<Navbar bg="transparent" variant="light">
         <Container className="justify-content-center justify-content-md-between">
             <Col md={4}>
                 <Navbar.Brand href="#home">
                     <img
                         alt=""
                         src={logo}
                         className="d-inline-block align-top"
                     />
                 </Navbar.Brand>
             </Col>
             <Col md={8} className="text-end text-xl-center">
                 <Nav
                     className="d-none d-md-block"
                     color="black"
                     style={{
                         fontSize: '.9rem',
                         fontWeight: 'bold',
                     }}
                 >
                     <Nav.Link className="d-inline" href="#home">Eğitim Paketlerimiz</Nav.Link>
                     <Nav.Link className="d-inline" href="#features">Örnek Videolar</Nav.Link>
                     <Nav.Link className="d-inline" href="#pricing">Yorumlar & Başarılarımız</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#x">Yardım</Nav.Link>
                     <Nav.Link className="d-none d-lg-inline" href="#y">Biz Kimiz</Nav.Link>
                     <Nav.Link className="d-none d-xl-inline" href="#z">Bize Ulaşın</Nav.Link>
                 </Nav>
             </Col>

             //The following are the places I added later. got it from this link: https://react-bootstrap.netlify.app/components/navbar/#navbar-offcanvas

             <Navbar.Toggle className="d-inline d-md-none" aria-controls="offcanvasNavbar" />
             <Navbar.Offcanvas
                 id="offcanvasNavbar"
                 aria-labelledby="offcanvasNavbarLabel"
                 placement="end"
             >
                 <Offcanvas.Header closeButton>
                     <Offcanvas.Title id="offcanvasNavbarLabel">Offcanvas</Offcanvas.Title>
                 </Offcanvas.Header>
                 <Offcanvas.Body>
                     <Nav className="justify-content-end flex-grow-1 pe-3">
                         <Nav.Link href="#action1">Home</Nav.Link>
                         <Nav.Link href="#action2">Link</Nav.Link>
                         <NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
                             <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
                             <NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
                             <NavDropdown.Divider />
                             <NavDropdown.Item href="#action5">
                                 Something else here
                             </NavDropdown.Item>
                         </NavDropdown>
                     </Nav>
                     <Form className="d-flex">
                         <FormControl
                             type="search"
                             placeholder="Search"
                             className="me-2"
                             aria-label="Search"
                         />
                         <Button variant="outline-success">Search</Button>
                     </Form>
                 </Offcanvas.Body>
             </Navbar.Offcanvas>
         </Container>
 </Navbar>

完全错误：

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.

Check the render method of HomepageNavbar.

我导入的东西：

import Nav from 'react-bootstrap/Nav'
import Container from 'react-bootstrap/Container'
import Col from 'react-bootstrap/Col'
import Navbar from 'react-bootstrap/Navbar'
import Offcanvas from 'react-bootstrap/Offcanvas'
import NavDropdown from 'react-bootstrap/NavDropdown'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'

Answer 1

检查 bootstrap 和 react-bootstrap 的版本，在我的例子中它已经过时 (2.0.0-beta.6")。

更新到最新版本后（目前 bootstrap: 5.1.3 和 react-bootstrap: 2.2.1）它工作正常。

React 错误：元素类型无效：需要一个字符串（对于 built-in 组件）或一个 class/function（对于复合组件）但得到：未定义

React err: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

reactjs

react-bootstrap