I need write tsx in sfc, so I installed both plugin-vue and plugin-vue-jsx. But the HMR seems not work.

[CaiWenlie]

I need write tsx in sfc, so I installed both plugin-vue and plugin-vue-jsx. But the HMR seems not work.
when I update codes in template, the HMR works well. but not works when updating codes in tsx. i'm not sure my config is correct or not. it seems like a bug of vite.

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ]
})

// Home.vue
<script lang="tsx">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Home',
  setup: () => {
    return () => {
      <h1>The Text here won't update, HMR seems not work</h1>
    }
  }
})
</script>

can anyone help! pls!

Originally posted by @CaiWenlie in #2923

[Shinigami92]

Maybe related to #3002

[Sociosarbis]

I found:

1. the content of jsx or tsx itself isn't inlined in main file of sfc, it would be imported like import _sfc_main from "/src/xxxx/xxxx/views/new/test.vue?vue&type=script&lang.tsx";
2. script module isn't added in updated modules in handleHotUpdate hook of plugin-vue

To solve 2, I try to add script modules into the updated modules and hmr works as expected.

Here is my naive solution.

Sociosarbis@9036d7c

[agusbena]

Thanks @Sociosarbis ,
Anyways, It seems the problem in the official build still remanins.
The <style> tag in the .vue component does hot update, but not the <script> tag when tsx is used