Import Server component into Client Component doesn't show error.

Unanswered

darknight12345 posted this in #help-forum

2023-07-01T22:38:05.000Z

This is my Navbar.tsx

'use client'
import { NavbarBrand } from './Navbar.client'

const Navbar = () => {
  return (
    <div className='sticky top-0 z-40 flex w-full items-center justify-between border-y border-borderColor bg-spaceBg px-3 py-2'>
      <NavbarBrand />
      </div>
    </div>
  )
}

export default Navbar

And this is my Navbarbar.client.tsx

import {
  TbQuestionMark,
} from 'react-icons/tb'

export const NavbarBrand = () => {
  return (
    <div className='mr-4 flex cursor-default items-center space-x-2 rounded border border-borderColor px-3 py-1.5'>
      <span className='text-neutral-600'>
        <TbQuestionMark />
      </span>
    </div>
  )
}

As you know, when we don't put 'use client', next js knows it is server component.
So now I import server component into client component but it gives me no error.
Please help me.

11 Replies

Bouvier des Flandres

2023-07-01T23:49:19.000Z

As you mentioned, if you are not using "use client" its the server component so that its ok to call another server component. Where is the issue?

darknight12345OP

2023-07-02T01:00:35.000Z

Oh Sorry @Bouvier des Flandres

I didn't write full code.
In the top of Navbar.tsx, I write 'use client'

Then it's client component.

joulev

2023-07-02T01:28:58.000Z

Do not ping mods or anyone not involved in the conversation (e.g. Rafael) for code help. You did this before. This is the final warning.

darknight12345OP

2023-07-02T01:29:21.000Z

Oh sorry. I will never do it again.

I just did nobody answers this questions.

Please help me.

joulev

2023-07-02T01:38:56.000Z

Also do not repost the same question in another post, I will remove that post. Just sit here and wait for someone to come and help

darknight12345OP

2023-07-02T01:40:02.000Z

Okay. I will follow the rule.
Can't you please explain me the issue?

Bouvier des Flandres

2023-07-10T16:33:20.000Z

@darknight12345 could you please post the error message or screenshot here? It should not have error unless react-icons is using any context inside it.