Registry / web-framework / babel-plugin-vue-jsx-hmr

babel-plugin-vue-jsx-hmr

library1.0.0jsnpmunverified

A Babel plugin that enables hot module replacement (HMR) for Vue 3 JSX and TSX components when using build tools like webpack and Rspack. Version 1.0.0 is latest. It works alongside @vue/babel-plugin-jsx and requires babel-loader. The plugin injects HMR code for components that are exported and declared via defineComponent, supporting named exports, re-exports, and default exports. It does not work with Vite (use @vitejs/plugin-vue-jsx instead). Provides HMR detection similar to Vite's plugin but for webpack/Rspack ecosystems.

web-framework devops

npm install babel-plugin-vue-jsx-hmr

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-VUE-J

babel-plugin-vue-jsx-hmr

web-frameworkjavascriptv1.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-plugin-vue-jsx-hmr

✓ In babel.config.js or webpack babel options: plugins: ['babel-plugin-vue-jsx-hmr']

✗ import babelPluginVueJsxHmr from 'babel-plugin-vue-jsx-hmr'

This is a Babel plugin, not imported in source code. Use as a string in plugins array.

Plugin usage with string

✓ plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr']

✗ plugins: ['babel-plugin-vue-jsx-hmr', '@vue/babel-plugin-jsx']

Order matters: @vue/babel-plugin-jsx must come before babel-plugin-vue-jsx-hmr.

defineComponent

✓ import { defineComponent } from 'vue'

✗ import { defineComponent } from '@vue/composition-api'

For Vue 3, always import from 'vue'. Must be used in component declaration for HMR detection.

Webpack configuration enabling HMR for Vue 3 JSX components, with a sample component using defineComponent.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.(jsx|tsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr'] } } } ] }, devServer: { liveReload: false, hot: true } }; // component.jsx import { defineComponent } from 'vue'; export default defineComponent({ setup() { const count = ref(0); return () => <button onClick={() => count.value++}>{count.value}</button>; } });

Debug

Known issues

gotchaHMR only works for components exported and declared via defineComponent at root level.

fix

Ensure each component is a root-level statement: export const Foo = defineComponent({...}) or export default defineComponent({...}). Anonymous default exports work.

affects: >=1.0.0

gotchaPlugin order matters: @vue/babel-plugin-jsx must come before babel-plugin-vue-jsx-hmr.

fix

Specify plugins in order: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr'].

affects: >=1.0.0

gotchaDoes not work with Vite; use @vitejs/plugin-vue-jsx instead.

fix

If using Vite, remove babel-plugin-vue-jsx-hmr and add @vitejs/plugin-vue-jsx to vite.config.js.

affects: >=1.0.0

gotchaRequires liveReload: false and hot: true in webpack devServer config.

fix

Set devServer: { liveReload: false, hot: true } in webpack.config.js.

affects: >=1.0.0

gotchaComponents not using defineComponent (e.g., plain object) will not get HMR.

fix

Wrap component options with defineComponent: const Comp = defineComponent({...}).

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module '@vue/babel-plugin-jsx'

Missing peer dependency.

fix

Install @vue/babel-plugin-jsx: npm install @vue/babel-plugin-jsx --save-dev

HMR not working: components not updating on save

Component not exported or not using defineComponent, or plugin order wrong.

fix

Ensure component is exported and declared with defineComponent, and plugins order is correct: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr'].

Hot Module Replacement is disabled in production mode.

HMR only works in development mode.

fix

Set mode: 'development' in webpack config, or use NODE_ENV=development.

Uncaught TypeError: Cannot read properties of undefined (reading 'setup')

Component not properly transformed; likely missing @vue/babel-plugin-jsx.

fix

Add @vue/babel-plugin-jsx to Babel plugins before babel-plugin-vue-jsx-hmr.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

@vue/babel-plugin-jsxrequiredRequired as a prerequisite plugin for JSX transform.

babel-loaderoptionalRequired to load Babel in webpack/Rspack.

Agent activity

30 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/liyincode/babel-plugin-vue-jsx-hmr ↗

packagehttps://www.npmjs.com/package/babel-plugin-vue-jsx-hmr ↗