babel-plugin-vue-jsx-hmr

babel-plugin-vue-jsx-hmr

A Babel plugin that adds Vue 3 JSX and TSX HMR support to Webpack and Rspack.

Usage

Webpack and Rspack

npm i -D babel-loader @babel/core @babel/preset-typescript \
  @vue/babel-plugin-jsx babel-plugin-vue-jsx-hmr

// webpack.config.cjs or rspack.config.cjs
module.exports = {
    module: {
        rules: [
            {
                test: /\.[jt]sx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-typescript'],
                        plugins: [
                            '@vue/babel-plugin-jsx',
                            'babel-plugin-vue-jsx-hmr',
                        ],
                    },
                },
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '...'],
    },
    devServer: {
        hot: true,
    },
}

The plugin can remain enabled in production; Webpack and Rspack remove its injected code when HMR is disabled.

Vite

Use the official @vitejs/plugin-vue-jsx

HMR detection

HMR injection requires both conditions:

• The component must be exported.
• The component must be declared by calling defineComponent in a root-level variable or export declaration.

Supported patterns

import { defineComponent } from 'vue'

// named exports w/ variable declaration: ok
export const Foo = defineComponent({})

// named exports referencing variable declaration: ok
const Bar = defineComponent({ render() { return <div>Test</div> }})
export { Bar }

// default export call: ok
export default defineComponent({ render() { return <div>Test</div> }})

// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return <div>Test</div> }})
export default Baz

Unsupported patterns

// not using `defineComponent` call
export const Bar = { ... }

// not exported
const Foo = defineComponent(...)