Work Perfectly but what about HMR?

[dmx974]

Hey, good job!

Just wanted to know how I can get HMR working on react components?

I have Vue3 + Vite + Veaury and a component folder with a react project inside. When I modify the react files, I cannot see the UI updated in real time, I need to refresh the browser. How to get this work?

[devilwjp]

@dmx974 Just add @vitejs/plugin-react-refresh to vite.config.js to solve your problem.

[devilwjp]

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { babel } from '@rollup/plugin-babel'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [
    vue({}),
    vueJsx({
      // exclude react_app directory
      exclude: [/[/\\]react_app[\\/$]+/]
    }),
    // This configuration can create react jsx files in any react_app directory
    babel({
      exclude: [/node_modules/],
      presets: [
        '@vue/cli-plugin-babel/preset',
        'veaury/babel/ReactPreset'
      ],
      babelHelpers: 'runtime',
    }),
    reactRefresh({
      parserPlugins: ['classProperties', 'classPrivateProperties']
    })
  ]
})

[dmx974]

It works like a charm, thank you for your reactivity!