{"id":10550,"library":"babel-plugin-transform-vue-jsx","title":"Vue 2 JSX Babel Transform (for Babel 6)","description":"This Babel plugin, `babel-plugin-transform-vue-jsx`, provides JSX syntax support specifically for Vue.js 2.x applications when used with Babel 6. Its primary function is to transpile JSX elements within Vue components into `h` (createElement) function calls, enabling developers to write render functions using a more declarative, React-like syntax. The version 3.7.0, as specified, is part of the older branch designed for Babel 6. It is no longer actively maintained. For projects utilizing Babel 7 and Vue 2, the successor plugin `@vue/babel-plugin-transform-vue-jsx` (latest v1.4.0, published 4 years ago) should be used instead. For Vue 3 projects, `@vue/babel-plugin-jsx` (latest v2.0.1, published 5 months ago) is the recommended and actively maintained solution. This particular package (`babel-plugin-transform-vue-jsx` v3.7.0) does not follow a regular release cadence and is considered superseded for modern development environments.","status":"abandoned","version":"3.7.0","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/babel-plugin-transform-vue-jsx","tags":["javascript","vue","babel","jsx"],"install":[{"cmd":"npm install babel-plugin-transform-vue-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-vue-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-vue-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for merging props and attributes when using JSX spread attributes, particularly for Babel 6 compatible versions.","package":"babel-helper-vue-jsx-merge-props","optional":false},{"reason":"Provides the base JSX parsing capabilities for Babel 6 to understand JSX syntax before transformation.","package":"babel-plugin-syntax-jsx","optional":false}],"imports":[{"note":"Babel plugins are configured in .babelrc or babel.config.js, not imported directly into application code. The plugin name 'transform-vue-jsx' is used in the configuration array.","wrong":"import { transformVueJsx } from 'babel-plugin-transform-vue-jsx';","symbol":"babel-plugin-transform-vue-jsx","correct":"{ \"plugins\": [\"transform-vue-jsx\"] }"}],"quickstart":{"code":"{\n  \"presets\": [\n    [\"env\", {\n      \"targets\": { \"node\": \"current\" }\n    }]\n  ],\n  \"plugins\": [\n    \"babel-plugin-syntax-jsx\",\n    \"babel-plugin-transform-vue-jsx\"\n  ]\n}","lang":"json","description":"This .babelrc configuration enables JSX transformation for Vue 2 applications using Babel 6. It includes the necessary syntax plugin and the transform plugin."},"warnings":[{"fix":"For Babel 7 and Vue 2, use `@vue/babel-plugin-transform-vue-jsx`. For Vue 3, use `@vue/babel-plugin-jsx`.","message":"This specific plugin version (3.x) is only compatible with Babel 6. It will not work with Babel 7 or later due to API changes in Babel itself. Using it with Babel 7+ will lead to configuration errors.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Migrate to `@vue/babel-plugin-transform-vue-jsx` for Vue 2 + Babel 7, or `@vue/babel-plugin-jsx` for Vue 3 projects.","message":"This plugin is effectively superseded. The `vuejs/babel-plugin-transform-vue-jsx` package (which version 3.x belongs to) has not been updated in many years. Modern Vue 2 projects with Babel 7 should use `@vue/babel-plugin-transform-vue-jsx`, and Vue 3 projects should use `@vue/babel-plugin-jsx`.","severity":"deprecated","affected_versions":"<=3.7.0"},{"fix":"Use programmatic equivalents (ternary, .map()) for unsupported directives or pass directive data as objects for custom directives. Refer to the plugin's documentation for detailed workarounds.","message":"Only `v-show` is natively supported among Vue's built-in directives in JSX. Other directives like `v-if`, `v-for`, and `v-model` require manual programmatic equivalents (e.g., ternary operators for `v-if`, `map` for `v-for`). Custom directives can be used via `v-name={value}` syntax, but arguments and modifiers are not directly supported.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Ensure `h` is in scope for render functions, especially with arrow functions or regular functions, by explicitly declaring it or passing it as a parameter.","message":"While `h` (createElement) auto-injection was introduced in version 3.4.0 for ES2015 methods and getters, it does not apply to functions or arrow functions. You still need to explicitly pass `h` as an argument or define `const h = this.$createElement` in those cases.","severity":"gotcha","affected_versions":">=3.4.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `babel-plugin-syntax-jsx` explicitly: `npm install babel-plugin-syntax-jsx --save-dev` or `yarn add babel-plugin-syntax-jsx --dev`.","cause":"The `babel-plugin-syntax-jsx` package, which is a required peer dependency for this transform, has not been installed or is an incompatible version for Babel 6.","error":"Cannot find module 'babel-plugin-syntax-jsx'"},{"fix":"For render functions, ensure `render(h) { ... }` or `const h = this.$createElement;` is present. For methods/getters, check plugin version (3.4.0+ for auto-inject) and ensure they are ES2015 methods, not arrow functions or regular functions.","cause":"The `h` (createElement) function is not in scope within a JSX render function or component method. This can happen with older plugin versions or when auto-injection rules are not met.","error":"ReferenceError: h is not defined"}],"ecosystem":"npm"}