{"id":22281,"library":"rollup-plugin-vue-jsx-compat","title":"rollup-plugin-vue-jsx-compat","description":"A Rollup plugin that transforms Vue JSX syntax (e.g., <div className=\"hehe\">) into Vue 3 compatible render functions using createVNode. Version 0.0.6 is the current stable release; it works alongside rollup-plugin-esbuild and the esbuild jsxFactory option. Unlike Babel-based Vue JSX plugins, this leverages esbuild for fast compilation and includes a built-in runtime helper (vueJsxCompat) to bridge esbuild's JSX output to Vue's createVNode. The plugin injects the transform automatically and allows custom JSX transformer paths. Ships TypeScript definitions, but the user must configure esbuild's jsxFactory option separately.","status":"active","version":"0.0.6","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install rollup-plugin-vue-jsx-compat","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-vue-jsx-compat","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-vue-jsx-compat","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required alongside to compile JSX/TSX using esbuild; the plugin itself does not handle transformation, it only rewrites the output to Vue-compatible code.","package":"rollup-plugin-esbuild","optional":true}],"imports":[{"note":"The package exports a function (default export). CommonJS require works but is not recommended when using ESM.","wrong":"const vueJsx = require('rollup-plugin-vue-jsx-compat');","symbol":"default (vueJsx)","correct":"import vueJsx from 'rollup-plugin-vue-jsx-compat'"},{"note":"vueJsxCompat is a global helper injected into your code; it is not a named export from the package. Do not attempt to import it.","wrong":"import { vueJsxCompat } from 'rollup-plugin-vue-jsx-compat';","symbol":"vueJsxCompat","correct":"// Not exported directly; injected by the plugin. Import only if you define a custom path."},{"note":"The plugin transforms JSX to createVNode calls. You must have 'vue' as a dependency.","wrong":"import { createElement } from 'vue';","symbol":"createVNode","correct":"import { createVNode } from 'vue'"}],"quickstart":{"code":"// rollup.config.js\nimport vueJsx from 'rollup-plugin-vue-jsx-compat';\nimport esbuild from 'rollup-plugin-esbuild';\n\nexport default {\n  input: 'src/index.tsx',\n  output: {\n    dir: 'dist',\n    format: 'esm',\n  },\n  plugins: [\n    vueJsx(),\n    esbuild({\n      jsxFactory: 'vueJsxCompat',\n    }),\n  ],\n};","lang":"javascript","description":"Shows minimal Rollup configuration using vue-jsx-compat with esbuild plugin, setting jsxFactory to the injected helper."},"warnings":[{"fix":"In your esbuild configuration, add: jsxFactory: 'vueJsxCompat'","message":"The plugin only works if esbuild's jsxFactory is set to 'vueJsxCompat'; otherwise JSX is not transformed correctly and runtime errors occur.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use a Vue 2 compatible JSX plugin (e.g., @vue/babel-plugin-jsx) or upgrade to Vue 3.","message":"This plugin is designed for Vue 3 only; it uses createVNode which is not available in Vue 2.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Pin to exact version and test upgrades manually.","message":"The package version 0.0.6 is very early; API may break without notice. No semver guarantees.","severity":"breaking","affected_versions":">=0.0.0 <1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure vueJsx() is added as a Rollup plugin before esbuild, and set esbuild's jsxFactory option to 'vueJsxCompat'.","cause":"The injected helper is missing because the plugin is not loaded correctly or esbuild's jsxFactory is not set to 'vueJsxCompat'.","error":"ReferenceError: vueJsxCompat is not defined"},{"fix":"Install 'vue' (npm install vue) and import from 'vue' in your entry point, or ensure your Rollup config resolves 'vue'.","cause":"Vue 3 is not installed or imported correctly; the transformed code calls createVNode from the 'vue' package.","error":"TypeError: createVNode is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}