babel-plugin-vue-jsx-hmr

Babel Plugin for Vue3 JSX & TSX HMR

Usage

Webpack

npm i -D babel-loader @vue/babel-plugin-jsx babel-plugin-vue-jsx-hmr

// webpack.config.js
{
    test: /\.(?:jsx|tsx)(\.js)?$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr']
        }
    }
}

In your webpack config, be sure to have the following options:

devServer: {
    liveReload: false,
    hot: true,
}

Rspack

npm i -D babel-loader @vue/babel-plugin-jsx babel-plugin-vue-jsx-hmr

// rspack.config.js
{
    test: /\.(?:jsx|tsx)(\.js)?$/,
    exclude: /node_modules/,
    use: {
        loader: 'babel-loader',
        options: {
            plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr']
        }
    }
},

Vite

@vitejs/plugin-vue-jsx

HMR Detection

The same principle as @vitejs/plugin-vue-jsx, so to speak, and its version of the babel plugin, whose README is referenced here.

This plugin supports HMR of Vue JSX components. The detection requirements are:

• The component must be exported.
• The component must be declared by calling defineComponent via a root-level statement, either variable declaration 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

Non-supported patterns

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

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