Registry / web-framework / rollup-plugin-vue-jsx-compat

rollup-plugin-vue-jsx-compat

library0.0.6jsnpmunverified

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.

web-framework

npm install rollup-plugin-vue-jsx-compat

package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-VUE-

rollup-plugin-vue-jsx-compat

web-frameworkjavascriptv0.0.6

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–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default (vueJsx)

✓ import vueJsx from 'rollup-plugin-vue-jsx-compat'

✗ const vueJsx = require('rollup-plugin-vue-jsx-compat');

The package exports a function (default export). CommonJS require works but is not recommended when using ESM.

vueJsxCompat

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

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

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

✓ import { createVNode } from 'vue'

✗ import { createElement } from 'vue';

The plugin transforms JSX to createVNode calls. You must have 'vue' as a dependency.

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', }), ], };

Debug

Known issues

gotchaThe 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'

affects: >=0.0.0

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

affects: >=0.0.0

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

affects: >=0.0.0 <1.0.0

Errors

Common errors & fixes

ReferenceError: vueJsxCompat is not defined

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

TypeError: createVNode is not a function

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

Upgrade

Version history

0.0.6latest on npm

Audit

Dependencies

rollup-plugin-esbuildoptionalRequired alongside to compile JSX/TSX using esbuild; the plugin itself does not handle transformation, it only rewrites the output to Vue-compatible code.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/rollup-plugin-vue-jsx-compat ↗