babel-plugin-transform-vue-tsx

3510.0.3 verified Sat Apr 25 auth: no javascript deprecated

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.

Common errors

error "h is not defined" ↓

cause 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: () => { ... }.

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

cause 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>

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

cause Missing required peer dependency.

fix

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

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

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

Warnings

deprecated The 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.

gotcha h 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/>.

breaking Requires 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

gotcha Custom 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>

deprecated The 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.

Install

npm install babel-plugin-transform-vue-tsx

yarn add babel-plugin-transform-vue-tsx

pnpm add babel-plugin-transform-vue-tsx

Imports

default plugin

wrong

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

correct

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

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

h auto-injection

wrong

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

correct

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

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

anyslot component

wrong

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

correct

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

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

Quickstart

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>
    );
  }
}