Next.js Discord

Discord Forum

typescript importing component error

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Avatar
Barbary LionOP
i have folder in app directory : components/navbar.tsx , that exports navbar function by default , when i import it in the layout.tsx it shows this error :
Property 'navbar' does not exist on type 'JSX.IntrinsicElements'.ts(2339)
() => JSX.Element
Answered by Yi Lon Ma
the name of a react component must start with uppercase letter
View full answer

19 Replies

Avatar
the name of a react component must start with uppercase letter
Answer
Avatar
Barbary LionOP
what if there is already the same of other node js packages ?
Avatar
then import it from the package you need
import {Navbar} from "@/package1"
import {Navbar as SecondPackageNavbar} from "@/package2"
Avatar
Barbary LionOP
this is not solution to myproblem mate i already have component i will try renaming it to something else
Avatar
instead of navbar rename it to Navbar
and then fix the import
Avatar
show code
Avatar
Barbary LionOP
yeah thank you i renamed it to Navbarx
i thought it was typescript error as im new to ts in general and more on next js part
Avatar
Barbary LionOP
@joulev other question
this component is from flowbite-reaction
<Navbar.Brand href="localhost:3000">
does this support link component of next js ?
Avatar
different question then please open a new post
Avatar
Barbary LionOP
alright
Avatar
also i dont use flowbite-reaction so idk about this, sorry for that
you probably need other people who have used this library to help
Avatar
Barbary LionOP
i will just read their docs i guess more approperly