next.js/node_modules/flowbite-react/dist/esm/components/Navbar/Navbar.mjs#Navbar#Brand" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

[prateekshaweb]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

import * as React from "react";
import Link from "next/link";
//import Nav from "./Nav";
import Image from "next/image";
import { Navbar, MegaMenu, Button, Dropdown } from "flowbite-react";

const menuItems = [
  {
    to: "/",
    label: "Home",
  },
  {
    to: "/markets/",
    label: "Markets",
    submenus: [
      { to: "/markets/pharmaceutical/", label: "Pharmaceutical" },
      {
        to: "/markets/chemical-fine-chemicals-and-agrochemical/",
        label: "Chemical , Fine Chemicals & Agrochemical",
      },
      { to: "/markets/aromatic-compounds/", label: "Aromatic Compounds" },
      { to: "/markets/power-generation/", label: "Power Generation" },
      { to: "/markets/metallurgy/", label: "Metallurgy" },
      { to: "/markets/packaging/", label: "Packaging" },
      { to: "/markets/coating/", label: "Coating" },
      { to: "/markets/semiconductors/", label: "Semiconductors" },
    ],
  },
  {
    to: "/products/",
    label: "Products",
    submenus: [
      {
        to: "/products/arya/",
        label: "ARYA",
      },
      { to: "/products/hvhd/", label: "HVHD" },
      {
        to: "/products/evo-double-stage-rotary-piston/",
        label: "EVO",
      },
      {
        to: "/products/ananta/",
        label: "ANANTA",
      },
    ],
  },
  {
    to: "/services/",
    label: "Services",
  },
  {
    to: "/downloads/",
    label: "Downloads",
  },
  { to: "/about-us/", label: "About Us" },
  { to: "/career/", label: "Career" },
  { to: "/contact-us/", label: "Contact Us" },
];

const Header = () => {
  const isItemActive = (item) => {
    const location = "";
    if (location.pathname === item.to) {
      return "active";
    }
    if (item.submenus) {
      for (const submenu of item.submenus) {
        if (location.pathname === submenu.to) {
          return "active";
        }
      }
    }
    return "";
  };

  return (
    <>
      <MegaMenu>
        <div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between p-4 md:space-x-8">
          <Navbar.Brand href="/">
            <Image
              alt=""
              src="/favicon.svg"
              width={24}
              height={24}
              className="mr-3 h-6 sm:h-9"
            />
            <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
              Flowbite
            </span>
          </Navbar.Brand>
          <div className="order-2 hidden items-center md:flex">
            <Link href="#">
              <a className="mr-1 rounded-lg px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-800 md:mr-2 md:px-5 md:py-2.5">
                Login
              </a>
            </Link>
            <Button href="#">Sign up</Button>
          </div>
          <Navbar.Toggle />
          <Navbar.Collapse>
            {menuItems.map((item) => (
              <Navbar.Link key={item.to} href={item.to}>
                {item.submenus ? (
                  <MegaMenu.Dropdown toggle={item.label}>
                    <ul className="grid grid-cols-3">
                      {item.submenus.map((submenu) => (
                        <div className="space-y-4 p-4" key={submenu.to}>
                          <li>
                            <Link href={submenu.to}>
                              <a className="hover:text-primary-600 dark:hover:text-primary-500">
                                {submenu.label}
                              </a>
                            </Link>
                          </li>
                        </div>
                      ))}
                    </ul>
                  </MegaMenu.Dropdown>
                ) : (
                  item.label
                )}
              </Navbar.Link>
            ))}
          </Navbar.Collapse>
        </div>
      </MegaMenu>
    </>
  );
};

export default Header;

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'

Current behavior

Describe what is currently happening and why it's a problem.

Expected behavior

Describe what you expected to happen.

Context

What are you trying to accomplish? Does this only happen on a specific browser, screen size, or operating system?

If possible, provide a live example URL, screenshot, video, or a repository with the minimal reproduction of the issue.

[SutuSebastian]

Please format the issue description and explain a bit more, provide reproduce steps, etc.

[SutuSebastian]

try to add "use client" directive at the top of the file.

[collierscott]

This happened to me when I converted from 'use client' to a server component. To fix this, I used import { NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from 'flowbite-react';

[SutuSebastian]

@collierscott that's right!

I even specified it here pretty clearly:

https://flowbite-react.com/docs/getting-started/server-components#compound-components