Problems using Default navbar components from flowbite-react

Question

I have installed the requirements indecated here.

After that copied the entired Default navbar code in App.jsx file, the problem raised is

`Uncaught ReferenceError: React is not defined`.
`$$typeof: Symbol(react.forward_ref)`

what is react.forward_ref?. Internet only shows something like React.forwardRef.
How can resolve the problem?

Default navbar code

<Navbar
  fluid={true}
  rounded={true}
>
  <Navbar.Brand
    as={{
      $$typeof: Symbol(react.forward_ref),
      render: LinkWithRef
    }}
    to="/navbars"
  >
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      className="mr-3 h-6 sm:h-9"
      alt="Flowbite Logo"
    />
    <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
      Flowbite
    </span>
  </Navbar.Brand>
  <Navbar.Toggle />
  <Navbar.Collapse>
    <Navbar.Link
      href="/navbars"
      active={true}
    >
      Home
    </Navbar.Link>
    <Navbar.Link
      as={{
        $$typeof: Symbol(react.forward_ref),
        render: LinkWithRef
      }}
      to="/navbars"
    >
      About
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Services
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Pricing
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Contact
    </Navbar.Link>
  </Navbar.Collapse>
</Navbar>

check my answer below. You need to put as={Link} – zurcacielos Aug 28 '23 at 07:52 — zurcacielos, Aug 28 '23 at 07:52

score 1 · Answer 1 · answered Aug 08 '23 at 22:15

1

i had the same problem, i solve it by removing the source of the problem or comment it!

as={{
      $$typeof: Symbol(react.forward_ref),
      render: LinkWithRef
    }}
    to="/navbars"

answered Aug 08 '23 at 22:15

aziz chellal

11
1

score 0 · Answer 2 · answered Feb 05 '23 at 20:32

0

Try to uncomment the React import statement. For example: import React from 'react'

answered Feb 05 '23 at 20:32

ssbarbee

1,626
2
16
24

score 0 · Answer 3 · answered Feb 25 '23 at 11:33

i have the same problem.My flowbite-react navbar does not seem to work

import  React from 'react'
import { Navbar } from 'flowbite-react'


function Header() {
  return (
      <Navbar
  fluid={true}
  rounded={true}
>
  <Navbar.Brand
    as={{
      $$typeof: Symbol(react.forward_ref),
      render: LinkWithRef
    }}
    to="/navbars"
  >
    <img
      src="https://flowbite.com/docs/images/logo.svg"
      className="mr-3 h-6 sm:h-9"
      alt="Flowbite Logo"
    />
    <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
      Flowbite
    </span>
  </Navbar.Brand>
  <Navbar.Toggle />
  <Navbar.Collapse>
    <Navbar.Link
      href="/navbars"
      active={true}
    >
      Home
    </Navbar.Link>
    <Navbar.Link
      as={{
        $$typeof: Symbol(react.forward_ref),
        render: LinkWithRef
      }}
      to="/navbars"
    >
      About
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Services
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Pricing
    </Navbar.Link>
    <Navbar.Link href="/navbars">
      Contact
    </Navbar.Link>
  </Navbar.Collapse>
</Navbar>

  )
}

export default Header

check this resource https://flowbite-react.com/storybook/?path=/docs/components-navbar--default-navbar , try removing the "as" and "to" attributes in the Navbar.Brand Component and use the href="your/home/page" — christianbueno.1, Feb 25 '23 at 16:04
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 01 '23 at 23:10
The link in the comment by christianbueno.1 is broken. They probably suggest to ditch the fancy stuff from the `Navbar.Brand` opening tag. It should work like this: ``. — Jussi Hirvi, Jul 31 '23 at 15:33

score 0 · Answer 4 · answered Aug 28 '23 at 07:51

The "as" property should indicate which class you want to use, example:

<Navbar.Brand as={Link} href="/">

where link comes from import Link from "next/link";

It seems to be an isue on the translation or creation of the docs, so you should replace:

<Navbar.Brand
as={{
  $$typeof: Symbol(react.forward_ref),
  render: LinkWithRef
}}
to="/navbars"

for

<Navbar.Brand as={Link} href="/">

Problems using Default navbar components from flowbite-react

4 Answers4