babel-plugin-vue-jsx-hmr )

Babel Plugin for Vue3 JSX & TSX HMR

Usage

$3

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

`js
// 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:
`js
devServer: {
liveReload: false,
hot: true,
}
`




$3


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

`js
// 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']
}
}
},
`

$3

@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.

$3

`jsx
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

}})
export { Bar }

// default export call: ok
export default defineComponent({ render() { return

Test

}})

// default export referencing variable declaration: ok
const Baz = defineComponent({ render() { return

Test

}})
export default Baz
`

$3

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

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