How to properly setup client components?

[SunP04]

I'm trying to setup a simple counter client component, code can be seen below. Code is minimal so it's easy to test it (first time using client components on hono)

When using the example given in the docs, an "obvious" error that document is not defined would happen, since I'm in the server.

Code:

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count is now ${count}`)
  }, [count]);

  return (
    <button onClick={() => setCount((c) => c + 1)}>
      {count}
    </button>
  )
}

[goisaki]

Hello! You might have already solved your problem, but I'll write a solution for others with the same issue.

---

Why is the document not defined?

The document interface is not supported on the server side where Hono runs.

Specifically, the render() function in hono/jsx/dom is designed to run in the browser, not on the server. If you try to use the document on the server, you'll get an error because the DOM is not accessible there. This happens because the code meant for the browser is being executed on the server.

How to fix it?

To fix this, the code needs to run on the client side. You need to bundle hono/jsx/dom to run in the browser. The best and easiest way to do this is with Vite, a tool that bundles dependent libraries with your code for the browser.

I won't go into details, but I've created a Hono + Vite repository where Counter works. Check it out!

Good luck!

[ClimenteA]

With this approach only client side is possible?

Is it possible to have both client and server components (maybe without vite and main.tsx)?

For example here is the server component:

import type { FC } from 'hono/jsx'
import { Layout } from "../components/Layout"

export const SetariPragMijlocFix: FC = () => {
    return (
        <Layout>

                   <h1 className="font-bold text-xl">Rendered on the server</h1>
                                  
                   <div id='some-dynamic-form'></div>
            
            </div>

            <script type="module" src="/src/components/SomeDynamicForm.tsx"></script>
        </Layout>
    )
}

The client component SomeDynamicForm.tsx somehow with render to be mounted on the server component.

Here is the client component:

import type { FC } from 'hono/jsx'
import { useState } from 'hono/jsx'

export const SomeDynamicForm: FC = () => {

    let [deleteAlert, setDeleteAlert] = useState(false)

    return (

        <>
            {
                     deleteAlert
                     ?
                    <span>Are you sure you want to delete?</span>
                    : null
            }

           <button onClick={() => setDeleteAlert(!deleteAlert)} className="btn btn-xs bg-white text-red-500">
                    Delete    
           </button>

        </>
    )
}

I've created a minimal example here:
https://github.com/ClimenteA/PFASimplu/tree/hono-client-server-combo