Next UI error : You're importing a component that needs useEffect
Unanswered
fardeen awais posted this in #help-forum
I am using next UI but i got a weird error. I put "use client" in my code to encounter the problem. But unable to do that.
I use Navbar as NextNavbar because it also give me: Import declaration conflicts with local declaration of 'Navbar'.
So i use NextNavbar to handle it but now error is same.
Here is my code:
I see no error in the terminal but in browser i see this:
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
I use Navbar as NextNavbar because it also give me: Import declaration conflicts with local declaration of 'Navbar'.
So i use NextNavbar to handle it but now error is same.
Here is my code:
"use client";
import React from 'react'
import {Navbar as NextNavbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
// import Image from 'next/image'
const Navbar = () => {
return (
<NextNavbar>
<NavbarBrand>
{/* <AcmeLogo /> */}
<p className="font-bold text-inherit">ACME</p>
</NavbarBrand>
<NavbarContent className="hidden sm:flex gap-4" justify="center">
<NavbarItem>
<Link color="foreground" href="#">
Features
</Link>
</NavbarItem>
<NavbarItem isActive>
<Link href="#" aria-current="page">
Customers
</Link>
</NavbarItem>
<NavbarItem>
<Link color="foreground" href="#">
Integrations
</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarItem className="hidden lg:flex">
<Link href="#">Login</Link>
</NavbarItem>
<NavbarItem>
<Button as={Link} color="primary" href="#" variant="flat">
Sign Up
</Button>
</NavbarItem>
</NavbarContent>
</NextNavbar>
)
}
export default NavbarI see no error in the terminal but in browser i see this:
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials