{"id":19244,"library":"babel-plugin-vue-jsx-hmr","title":"babel-plugin-vue-jsx-hmr","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/liyincode/babel-plugin-vue-jsx-hmr","tags":["javascript","babel","plugin","webpack","rspack","rsbuild","vue3","jsx","hmr","typescript"],"install":[{"cmd":"npm install babel-plugin-vue-jsx-hmr","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-vue-jsx-hmr","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-vue-jsx-hmr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a prerequisite plugin for JSX transform.","package":"@vue/babel-plugin-jsx","optional":false},{"reason":"Required to load Babel in webpack/Rspack.","package":"babel-loader","optional":true}],"imports":[{"note":"This is a Babel plugin, not imported in source code. Use as a string in plugins array.","wrong":"import babelPluginVueJsxHmr from 'babel-plugin-vue-jsx-hmr'","symbol":"babel-plugin-vue-jsx-hmr","correct":"In babel.config.js or webpack babel options: plugins: ['babel-plugin-vue-jsx-hmr']"},{"note":"Order matters: @vue/babel-plugin-jsx must come before babel-plugin-vue-jsx-hmr.","wrong":"plugins: ['babel-plugin-vue-jsx-hmr', '@vue/babel-plugin-jsx']","symbol":"Plugin usage with string","correct":"plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr']"},{"note":"For Vue 3, always import from 'vue'. Must be used in component declaration for HMR detection.","wrong":"import { defineComponent } from '@vue/composition-api'","symbol":"defineComponent","correct":"import { defineComponent } from 'vue'"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(jsx|tsx)$/,\n        exclude: /node_modules/,\n        use: {\n          loader: 'babel-loader',\n          options: {\n            plugins: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr']\n          }\n        }\n      }\n    ]\n  },\n  devServer: {\n    liveReload: false,\n    hot: true\n  }\n};\n\n// component.jsx\nimport { defineComponent } from 'vue';\nexport default defineComponent({\n  setup() {\n    const count = ref(0);\n    return () => <button onClick={() => count.value++}>{count.value}</button>;\n  }\n});","lang":"javascript","description":"Webpack configuration enabling HMR for Vue 3 JSX components, with a sample component using defineComponent."},"warnings":[{"fix":"Ensure each component is a root-level statement: export const Foo = defineComponent({...}) or export default defineComponent({...}). Anonymous default exports work.","message":"HMR only works for components exported and declared via defineComponent at root level.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Specify plugins in order: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr'].","message":"Plugin order matters: @vue/babel-plugin-jsx must come before babel-plugin-vue-jsx-hmr.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If using Vite, remove babel-plugin-vue-jsx-hmr and add @vitejs/plugin-vue-jsx to vite.config.js.","message":"Does not work with Vite; use @vitejs/plugin-vue-jsx instead.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set devServer: { liveReload: false, hot: true } in webpack.config.js.","message":"Requires liveReload: false and hot: true in webpack devServer config.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Wrap component options with defineComponent: const Comp = defineComponent({...}).","message":"Components not using defineComponent (e.g., plain object) will not get HMR.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install @vue/babel-plugin-jsx: npm install @vue/babel-plugin-jsx --save-dev","cause":"Missing peer dependency.","error":"Cannot find module '@vue/babel-plugin-jsx'"},{"fix":"Ensure component is exported and declared with defineComponent, and plugins order is correct: ['@vue/babel-plugin-jsx', 'babel-plugin-vue-jsx-hmr'].","cause":"Component not exported or not using defineComponent, or plugin order wrong.","error":"HMR not working: components not updating on save"},{"fix":"Set mode: 'development' in webpack config, or use NODE_ENV=development.","cause":"HMR only works in development mode.","error":"Hot Module Replacement is disabled in production mode."},{"fix":"Add @vue/babel-plugin-jsx to Babel plugins before babel-plugin-vue-jsx-hmr.","cause":"Component not properly transformed; likely missing @vue/babel-plugin-jsx.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'setup')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}