{"id":19228,"library":"babel-plugin-transform-vue-tsx","title":"babel-plugin-transform-vue-tsx","description":"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.","status":"deprecated","version":"3510.0.3","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-tsx","lang":"bash","label":"npm"},{"cmd":"yarn add babel-plugin-transform-vue-tsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-plugin-transform-vue-tsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the mergeProps helper imported during transform.","package":"babel-helper-vue-jsx-merge-props","optional":false},{"reason":"Required to parse JSX syntax.","package":"babel-plugin-syntax-jsx","optional":false}],"imports":[{"note":"This is a Babel plugin, not a preset. It must be listed under \"plugins\".","wrong":"Adding \"babel-plugin-transform-vue-tsx\" to presets.","symbol":"default plugin","correct":"Add \"transform-vue-tsx\" to .babelrc plugins array."},{"note":"Auto-injection only works for ES2015 methods and getters, not arrow functions or function expressions.","wrong":"Using render function with parameter (h) => ... expecting auto-injection.","symbol":"h auto-injection","correct":"Use ES2015 method syntax (render() { ... }) to get automatic h injection."},{"note":"anyslot is a helper component from vue-tsx-helper to bypass TSX strict type checking for custom components.","wrong":"Using <component is=\"...\"> directly in TSX, which doesn't resolve types.","symbol":"anyslot component","correct":"import { VueComponent } from 'vue-tsx-helper'; then <anyslot is=\"component-name\">...</anyslot>"}],"quickstart":{"code":"// .babelrc\n{\n  \"presets\": [\"env\"],\n  \"plugins\": [\"transform-vue-tsx\"]\n}\n\n// Component.vue (or .tsx with Vue class component)\nimport Vue from 'vue';\nimport Component from 'vue-class-component';\nimport { VueComponent } from 'vue-tsx-helper';\n\n@Component\nexport default class MyComponent extends VueComponent<IProps> {\n  render() {\n    return (\n      <div class=\"container\">\n        <anyslot is=\"router-link\" to=\"/home\">Home</anyslot>\n      </div>\n    );\n  }\n}","lang":"typescript","description":"Setting up the plugin in .babelrc and using JSX with TypeScript, including the anyslot helper for custom components."},"warnings":[{"fix":"Consider migrating to Vue 3 and using @vue/babel-plugin-jsx which is officially maintained.","message":"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.","severity":"deprecated","affected_versions":">=0"},{"fix":"Use method syntax instead of arrow functions. For example: render() { return <div/>; } instead of render: () => <div/>.","message":"h auto-injection only works for ES2015 method declarations (render() { ... }) and getters, not for arrow functions or function expressions.","severity":"gotcha","affected_versions":">=3.4.0"},{"fix":"Install the peer dependency: npm install --save-dev babel-helper-vue-jsx-merge-props","message":"Requires babel-helper-vue-jsx-merge-props as a peer dependency. Missing it will cause runtime errors.","severity":"breaking","affected_versions":">=0"},{"fix":"Use the anyslot helper from vue-tsx-helper: <anyslot is=\"router-link\" to=\"/\">...</anyslot>","message":"Custom component tags in TSX (e.g. <RouterLink>) cause TypeScript type errors because JSX intrinsic elements are limited.","severity":"gotcha","affected_versions":">=0"},{"fix":"For Vue 3, use @vue/babel-plugin-jsx. For Babel 7, check compatibility or use @babel/preset-env.","message":"The plugin only supports Vue 2.0 and Babel 6. Not compatible with Vue 3 or Babel 7+.","severity":"deprecated","affected_versions":">=0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use ES2015 method syntax: render() { ... } instead of render: () => { ... }.","cause":"Using arrow function or function expression for render method without passing h parameter, and auto-injection doesn't kick in.","error":"\"h is not defined\""},{"fix":"Use the anyslot helper: <anyslot is=\"router-link\" to=\"/\">...</anyslot>","cause":"TSX does not allow non-lowercase intrinsic elements; custom components like RouterLink must be typed or bypassed.","error":"TypeScript error: 'JSX element type 'RouterLink' is not a constructor function for JSX elements.'"},{"fix":"Install the package: npm install --save-dev babel-helper-vue-jsx-merge-props","cause":"Missing required peer dependency.","error":"Module not found: Can't resolve 'babel-helper-vue-jsx-merge-props'"},{"fix":"For Babel 7, install @babel/plugin-syntax-jsx instead of babel-plugin-syntax-jsx. Or use @babel/preset-env.","cause":"Using Babel 7+ without installing the correct syntax plugin.","error":"Error: Cannot find module '@babel/plugin-syntax-jsx'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}