rollup-plugin-vue-jsx-compat

0.0.6 verified Mon Apr 27 auth: no javascript

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.

Common errors

error ReferenceError: vueJsxCompat is not defined ↓

cause The injected helper is missing because the plugin is not loaded correctly or esbuild's jsxFactory is not set to 'vueJsxCompat'.

fix

Ensure vueJsx() is added as a Rollup plugin before esbuild, and set esbuild's jsxFactory option to 'vueJsxCompat'.

error TypeError: createVNode is not a function ↓

cause Vue 3 is not installed or imported correctly; the transformed code calls createVNode from the 'vue' package.

fix

Install 'vue' (npm install vue) and import from 'vue' in your entry point, or ensure your Rollup config resolves 'vue'.

Warnings

gotcha The plugin only works if esbuild's jsxFactory is set to 'vueJsxCompat'; otherwise JSX is not transformed correctly and runtime errors occur. ↓

fix In your esbuild configuration, add: jsxFactory: 'vueJsxCompat'

gotcha This plugin is designed for Vue 3 only; it uses createVNode which is not available in Vue 2. ↓

fix Use a Vue 2 compatible JSX plugin (e.g., @vue/babel-plugin-jsx) or upgrade to Vue 3.

breaking The package version 0.0.6 is very early; API may break without notice. No semver guarantees. ↓

fix Pin to exact version and test upgrades manually.

Install

npm install rollup-plugin-vue-jsx-compat

yarn add rollup-plugin-vue-jsx-compat

pnpm add rollup-plugin-vue-jsx-compat

Imports

default (vueJsx)
wrong
```
const vueJsx = require('rollup-plugin-vue-jsx-compat');
```
correct
```
import vueJsx from 'rollup-plugin-vue-jsx-compat'
```
The package exports a function (default export). CommonJS require works but is not recommended when using ESM.

vueJsxCompat

wrong

import { vueJsxCompat } from 'rollup-plugin-vue-jsx-compat';

correct

// Not exported directly; injected by the plugin. Import only if you define a custom path.

vueJsxCompat is a global helper injected into your code; it is not a named export from the package. Do not attempt to import it.

createVNode
wrong
```
import { createElement } from 'vue';
```
correct
```
import { createVNode } from 'vue'
```
The plugin transforms JSX to createVNode calls. You must have 'vue' as a dependency.

Quickstart

Shows minimal Rollup configuration using vue-jsx-compat with esbuild plugin, setting jsxFactory to the injected helper.

// rollup.config.js
import vueJsx from 'rollup-plugin-vue-jsx-compat';
import esbuild from 'rollup-plugin-esbuild';

export default {
  input: 'src/index.tsx',
  output: {
    dir: 'dist',
    format: 'esm',
  },
  plugins: [
    vueJsx(),
    esbuild({
      jsxFactory: 'vueJsxCompat',
    }),
  ],
};