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

babel-plugin-transform-vue-tsx

library3510.0.3jsnpmunverified

A Babel plugin that transforms JSX in Vue 2.0 projects with TypeScript support. Version 3510.0.3 (non-semver, likely a fork) builds on babel-plugin-transform-vue-jsx to handle strict TypeScript JSX type checking, such as allowing custom component tags (e.g. RouterLink) via an 'anyslot' helper. It auto-injects h (createElement) into methods and getters. Requires babel-helper-vue-jsx-merge-props as a peer dependency. Compatible with Vue 2.0 and Babel 6. Not actively maintained.

web-framework

npm install babel-plugin-transform-vue-tsx

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-TRANS

babel-plugin-transform-vue-tsx

web-frameworkjavascriptv3510.0.3

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.

default plugin

✓ Add "transform-vue-tsx" to .babelrc plugins array.

✗ Adding "babel-plugin-transform-vue-tsx" to presets.

This is a Babel plugin, not a preset. It must be listed under "plugins".

h auto-injection

✓ Use ES2015 method syntax (render() { ... }) to get automatic h injection.

✗ Using render function with parameter (h) => ... expecting auto-injection.

Auto-injection only works for ES2015 methods and getters, not arrow functions or function expressions.

anyslot component

✓ import { VueComponent } from 'vue-tsx-helper'; then <anyslot is="component-name">...</anyslot>

✗ Using <component is="..."> directly in TSX, which doesn't resolve types.

anyslot is a helper component from vue-tsx-helper to bypass TSX strict type checking for custom components.

Setting up the plugin in .babelrc and using JSX with TypeScript, including the anyslot helper for custom components.

// .babelrc { "presets": ["env"], "plugins": ["transform-vue-tsx"] } // Component.vue (or .tsx with Vue class component) import Vue from 'vue'; import Component from 'vue-class-component'; import { VueComponent } from 'vue-tsx-helper'; @Component export default class MyComponent extends VueComponent<IProps> { render() { return ( <div class="container"> <anyslot is="router-link" to="/home">Home</anyslot> </div> ); } }

Debug

Known issues

deprecatedThe package version is 3510.0.3 (non-standard semver) and is an unofficial fork. The original babel-plugin-transform-vue-jsx is no longer actively maintained for Vue 2.

fix

Consider migrating to Vue 3 and using @vue/babel-plugin-jsx which is officially maintained.

affects: >=0

gotchah auto-injection only works for ES2015 method declarations (render() { ... }) and getters, not for arrow functions or function expressions.

fix

Use method syntax instead of arrow functions. For example: render() { return <div/>; } instead of render: () => <div/>.

affects: >=3.4.0

breakingRequires babel-helper-vue-jsx-merge-props as a peer dependency. Missing it will cause runtime errors.

fix

Install the peer dependency: npm install --save-dev babel-helper-vue-jsx-merge-props

affects: >=0

gotchaCustom component tags in TSX (e.g. <RouterLink>) cause TypeScript type errors because JSX intrinsic elements are limited.

fix

Use the anyslot helper from vue-tsx-helper: <anyslot is="router-link" to="/">...</anyslot>

affects: >=0

deprecatedThe plugin only supports Vue 2.0 and Babel 6. Not compatible with Vue 3 or Babel 7+.

fix

For Vue 3, use @vue/babel-plugin-jsx. For Babel 7, check compatibility or use @babel/preset-env.

affects: >=0

Errors

Common errors & fixes

"h is not defined"

Using arrow function or function expression for render method without passing h parameter, and auto-injection doesn't kick in.

fix

Use ES2015 method syntax: render() { ... } instead of render: () => { ... }.

TypeScript error: 'JSX element type 'RouterLink' is not a constructor function for JSX elements.'

TSX does not allow non-lowercase intrinsic elements; custom components like RouterLink must be typed or bypassed.

fix

Use the anyslot helper: <anyslot is="router-link" to="/">...</anyslot>

Module not found: Can't resolve 'babel-helper-vue-jsx-merge-props'

Missing required peer dependency.

fix

Install the package: npm install --save-dev babel-helper-vue-jsx-merge-props

Error: Cannot find module '@babel/plugin-syntax-jsx'

Using Babel 7+ without installing the correct syntax plugin.

fix

For Babel 7, install @babel/plugin-syntax-jsx instead of babel-plugin-syntax-jsx. Or use @babel/preset-env.

Upgrade

Version history

3510.0.3latest on npm

Audit

Dependencies

babel-helper-vue-jsx-merge-propsrequiredProvides the mergeProps helper imported during transform.

babel-plugin-syntax-jsxrequiredRequired to parse JSX syntax.

Agent activity

9 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-tsx ↗