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

babel-plugin-transform-vue-jsx

library3.7.0jsnpmunverified

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.

web-framework serialization http-networking data testing

npm install babel-plugin-transform-vue-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-vue-jsx

web-frameworkjavascriptv3.7.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-transform-vue-jsx

✓ { "plugins": ["transform-vue-jsx"] }

✗ import { transformVueJsx } from 'babel-plugin-transform-vue-jsx';

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.

This .babelrc configuration enables JSX transformation for Vue 2 applications using Babel 6. It includes the necessary syntax plugin and the transform plugin.

{ "presets": [ ["env", { "targets": { "node": "current" } }] ], "plugins": [ "babel-plugin-syntax-jsx", "babel-plugin-transform-vue-jsx" ] }

Debug

Known issues

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

fix

For Babel 7 and Vue 2, use `@vue/babel-plugin-transform-vue-jsx`. For Vue 3, use `@vue/babel-plugin-jsx`.

affects: >=4.0.0

deprecatedThis 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`.

fix

Migrate to `@vue/babel-plugin-transform-vue-jsx` for Vue 2 + Babel 7, or `@vue/babel-plugin-jsx` for Vue 3 projects.

affects: <=3.7.0

gotchaOnly `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.

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.

affects: >=3.0.0

gotchaWhile `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.

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.

affects: >=3.4.0

Errors

Common errors & fixes

Cannot find module 'babel-plugin-syntax-jsx'

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.

fix

Install `babel-plugin-syntax-jsx` explicitly: `npm install babel-plugin-syntax-jsx --save-dev` or `yarn add babel-plugin-syntax-jsx --dev`.

ReferenceError: h is not defined

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.

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.

Upgrade

Version history

3.7.0latest on npm

Audit

Dependencies

babel-helper-vue-jsx-merge-propsrequiredRequired for merging props and attributes when using JSX spread attributes, particularly for Babel 6 compatible versions.

babel-plugin-syntax-jsxrequiredProvides the base JSX parsing capabilities for Babel 6 to understand JSX syntax before transformation.

Agent activity

30 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vuejs/babel-plugin-transform-vue-jsx ↗

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