Vite HMR doesn't work for client components

[brillout]

What version of Hono are you using?

4.9.6

What runtime/platform is your app running on? (with version if possible)

Node.js

What steps can reproduce the bug?

https://github.com/brillout/reprod_hono-vite-hmr-bug

What is the expected behavior?

No response

What do you see instead?

No response

Additional information

No response

[Phoscur]

It might deserve its own issue, however it might be related enough so I'm posting this here first, this appeard after npm audit fix to v4.9.6/7:

✘ [ERROR] The JSX syntax extension is not currently enabled

    src/render.server.tsx:13:6:
      13 │ }) => <>
         ╵       ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.

Vite tries to optimize dependencies (reproduce with --force) on hono serverside. Changing the root folder to only include client side code will avoid that issue.

[yusukebe]

This is not an issue for this honojs/hono but for honojs/vite-plugins. I'll transfer it.

[yusukebe]

Hi @brillout

Thank you for the report.

This is caused by the dev server from @hono/vite-dev-server. In the project in your repo, if you edit pages/index/+Page.tsx, the dev server will fully reload not only the client side in the current implementation. To prevent it, you can add the blank to the handleHotUpdate option:

import { defineConfig } from 'vite'
import devServer from '@hono/vite-dev-server'

export default defineConfig({
  plugins: [
    devServer({
      handleHotUpdate: () => {} // <=== add
    })
  ]
})

[brillout]

CC @magne4000