Topic: Attempting to use the animated navbar in react MDB [Still getting an error]
brandon cox priority asked 2 years ago
Expected behavior
Import react pro/experimental components to use the animated navbar example
*Actual behavior*Unable to import the components, how do I use NPM to import the pro version to use the experimental components in the animated navbar example, I have the advanced bundle. Right now I have the registered MBD npm imported via npm install.
Resources (screenshots, code snippets etc.)
brandon cox priority answered 2 years ago
Unhandled Runtime Error Error: 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 NavBar.
I get this error when I import "MDBAnimatedNavbar" and change "MDBNavbar" to "MDBAnimatedNavbar".
Krzysztof Wilk staff commented 2 years ago
Hi!
Is it possible to share your code with me (even some simplified version, just to show the issue)? Everything works on my side, so I think I have to take a look on your project
brandon cox priority commented 2 years ago
https://mdbootstrap.com/snippets/react/brandon_cox/4527017 Here is the snippet WITHOUT the MDBAnimatedNavbar.
Krzysztof Wilk staff answered 2 years ago
Hi!
There's a typo in our documentation, we will fix it as soon as possible. The code below should work:
import React, { useState } from "react";
import {
MDBAnimatedNavbar,
MDBContainer,
MDBNavbarToggler,
MDBIcon,
MDBNavbarNav,
MDBNavbarLink,
MDBNavbarItem,
MDBCollapse,
} from "mdb-react-ui-kit";
export default function App() {
const [showBasic, setShowBasic] = useState(true);
return (
<>
<header>
<MDBAnimatedNavbar expand="lg" fixed="top">
<MDBContainer fluid>
<MDBNavbarToggler
onClick={() => setShowBasic(!showBasic)}
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<MDBIcon fas icon="bars" />
</MDBNavbarToggler>
<MDBCollapse navbar show={showBasic}>
<MDBNavbarNav fullWidth={false} className="me-auto mb-2 mb-lg-0">
<MDBNavbarItem active>
<MDBNavbarLink href="#">Home</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
rel="nofollow"
target="_blank"
>
Learn Bootstrap 5
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
href="https://mdbootstrap.com/docs/standard/"
target="_blank"
>
Download MDB UI KIT
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
<MDBNavbarNav fullWidth={false} className="flex-row">
<MDBNavbarItem>
<MDBNavbarLink
className="pe-2"
href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
rel="nofollow"
target="_blank"
>
<MDBIcon fab icon="youtube" />
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
className="px-2"
href="https://www.facebook.com/mdbootstrap"
rel="nofollow"
target="_blank"
>
<MDBIcon fab icon="facebook-f" />
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
className="px-2"
href="https://twitter.com/MDBootstrap"
rel="nofollow"
target="_blank"
>
<MDBIcon fab icon="twitter" />
</MDBNavbarLink>
</MDBNavbarItem>
<MDBNavbarItem>
<MDBNavbarLink
className="ps-2"
href="https://github.com/mdbootstrap/mdb-ui-kit"
rel="nofollow"
target="_blank"
>
<MDBIcon fab icon="github" />
</MDBNavbarLink>
</MDBNavbarItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBAnimatedNavbar>
<div
id="intro"
className="bg-image"
style={{
backgroundImage:
"url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp)",
height: "100vh",
}}
>
<div
className="mask text-white"
style={{ backgroundColor: "rgba(0, 0, 0, 0.8)" }}
>
<MDBContainer className="d-flex align-items-center text-center h-100">
<div>
<h1 className="mb-5">This is title</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Officiis molestiae laboriosam numquam expedita ullam saepe
ipsam, deserunt provident corporis, sit non accusamus maxime,
magni nulla quasi iste ipsa architecto? Autem!
</p>
</div>
</MDBContainer>
</div>
</div>
</header>
<MDBContainer className="my-5">
<p>
{" "}
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam
minima perspiciatis eos tenetur. Praesentium dolores at quos aperiam
sed, sint provident consectetur incidunt, nostrum porro earum commodi,
ex architecto.
</p>
</MDBContainer>
</>
);
}
brandon cox priority commented 2 years ago
Unhandled Runtime Error Error: 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 NavBar
.
I get this error when I import "MDBAnimatedNavbar" and change "MDBNavbar" to "MDBAnimatedNavbar".
brandon cox priority commented 2 years ago
Any ideas on the error?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.2.0
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No