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!

[NOMADE55]

This is such a good answer it should be in the docs.
That said, I was having some trouble building this with Deno. Do you have any quick recommendations for that one?