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?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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