Component isn't rendering on the client

[cobalt maple]

Hello.

This is app/admin/page.tsx:

'use client'

import { useEffect, useState } from 'react'

import { Application } from '@/app/admin/components'

export default () => {
  const [isClient, setIsClient] = useState<boolean>(false)

  useEffect(() => {
    setIsClient(true)
  })

  console.log('admin page', isClient)

  if (!isClient) {
    return null
  }

  return <Application />
}

I'm trying to render the Application component (React Admin) only on the browser.

I'm getting one console.log on the server where isClient is false and no console.log's in the browser. Why is that?

[compact cedar]

Something that immediately caught my eye with this is that you are not using a dependency array on your useEffect hook to set the client state boolean

The next question I'd have is are you getting any errors in the console and what is rendering on your page? If the page is blank, then we can assume that it's either erroring or hitting your return null block - I'd try returning actual JSX like

return (<div>{`isClient: ${isClient}`}</div>)

So that you can at least validate that the page is rendering without errors and see if the value is being passed through

[cobalt maple]

@compact cedar Thanks, fixed the useEffect. You were correct and it renders isClient: false but no errors in the console.

I also added a console.log to the effect and it's not running

If I take out the useEffect entirely and leave in the 'use client' then even though it should be run on the client only, it tries to render on the server causing an error there.

[compact cedar]

What happens if you remove 'use client' and restart the server?

[cobalt maple]

ah, then I get this:

./app/admin/page.tsx

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

   ,----
 3 | import { useEffect, useState } from 'react'
   :                     ^^^^^^^^
   `----

Maybe one of these should be marked as a client entry with "use client":
  app/admin/page.tsx

Hmm, because I get no console.log()'s at all that means that the page that should be bundled isn't ran in the client but the SSR does run (returning the isClient: false in the HTML)

[compact cedar]

At this point I would double check my dependencies. I have a feeling that you may be running the latest Next.js package but not the latest React package

Just speculating, but that's typically where I would look next, if not just deleting my node modules and reinstalling to make sure all my dependencies are clean

[cobalt maple]

git clone [email protected]:Industrial/test-next-keystone.git
cd test-next-keystone
yarn
yarn dev

That's the reproduction. I think I have the latest version of next and react