Registry / web-framework / unplugin-vue-jsx

unplugin-vue-jsx

library0.8.1jsnpmunverified

unplugin-vue-jsx provides seamless integration of JSX syntax into Vue 3 projects across a multitude of build tools, including Vite, Rollup, esbuild, Webpack, Rolldown, and Rspack. It leverages the unplugin ecosystem to offer a single plugin API compatible with various bundlers, simplifying configuration. The package is currently stable at version 0.8.1, with a release cadence that has seen multiple minor and patch updates in recent months, addressing bug fixes and introducing breaking changes, particularly around Node.js version support and Vue compatibility. A key differentiator is its broad bundler support and focus on Vue 3's JSX transformation, internalizing Babel for robust syntax parsing and transformation. It is primarily used as a development dependency to enable `.jsx` and `.tsx` file processing.

web-framework

npm install unplugin-vue-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · UNPLUGIN-VUE-JSX

unplugin-vue-jsx

web-frameworkjavascriptv0.8.1

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

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

Starter (Vite)

✓ import Starter from 'unplugin-vue-jsx/vite'

✗ const Starter = require('unplugin-vue-jsx/vite')

Use this import for Vite projects. Similar default exports exist for other bundlers (e.g., `/rollup`, `/webpack`, `/esbuild`). CommonJS `require` is not supported since v0.6.0.

Starter (Webpack)

✓ import Starter from 'unplugin-vue-jsx/webpack'

✗ const Starter = require('unplugin-vue-jsx/webpack')

Use this import for Webpack projects. Ensure your Webpack configuration is using ES Modules, as CommonJS `require` is no longer supported since v0.6.0.

Options type

✓ import type { Options } from 'unplugin-vue-jsx'

Use this to import the TypeScript type definition for the plugin's configuration options. The actual plugin factory function (e.g., 'Starter') takes an object conforming to this type.

Shows how to configure unplugin-vue-jsx with Vite for a basic Vue 3 project, enabling JSX support for components. Includes commented JSX example.

import { defineConfig } from 'vite' import VueJsx from 'unplugin-vue-jsx/vite' // Example Vue 3 JSX component (e.g., src/App.jsx) // import { defineComponent } from 'vue'; // export default defineComponent({ // props: { name: String }, // render() { // return ( // <div> // <h1>Hello, {this.name || 'Vue JSX'}!</h1> // <p>This is a JSX component in Vue 3.</p> // </div> // ); // }, // }); export default defineConfig({ plugins: [ VueJsx({ // Optional: configure Babel plugins or parser options. // For .tsx files, explicitly enable TypeScript parsing: // parserOpts: { // plugins: ['jsx', 'typescript'] // }, // babelPlugins: [] // Add extra Babel plugins if needed }) ] })

Debug

Known issues

breakingVue 2 support has been dropped. Projects targeting Vue 2 must use an older version of the plugin or migrate to Vue 3.

fix

Upgrade your project to Vue 3 or pin `unplugin-vue-jsx` to a version prior to 0.7.0 (e.g., `~0.6.x`).

affects: >=0.7.0

breakingNode.js v16 and v18 are no longer supported. The plugin requires Node.js >=20.19.0.

fix

Update your Node.js environment to version 20.19.0 or higher. Check your project's `engines` field in `package.json`.

affects: >=0.7.0

breakingCommonJS (CJS) builds have been dropped. The package is now ESM-only, meaning `require()` statements will fail in configuration files.

fix

Migrate your build configuration files (e.g., `vite.config.js`, `rollup.config.js`) to use ES module syntax (`import`/`export`). Ensure your project's `package.json` uses `"type": "module"` or uses `.mjs` extensions for config files.

affects: >=0.6.0

breakingTypeScript transformation is no longer enabled by default, and `@babel/plugin-syntax-typescript` is no longer a direct dependency. If you use `.tsx` files, you must explicitly configure parser options.

fix

Manually add `typescript` to `parserOpts.plugins` in the plugin configuration if you are using `.tsx` files, for example: `VueJsx({ parserOpts: { plugins: ['jsx', 'typescript'] } })`.

affects: >=0.8.0

gotchaThe plugin ignores `node_modules` by default. This can cause issues if you have linked packages or specific configurations requiring JSX transformation within `node_modules`.

fix

Adjust the `exclude` option in the plugin configuration to explicitly include paths you wish to transform, e.g., `exclude: [/node_modules\/(?!your-linked-package)/]` or set `exclude: []` to disable exclusion entirely.

affects: >=0.6.0

breakingSupport for Webpack 4 and Vue CLI 4 has been dropped, aligning with the deprecation of older build tooling.

fix

Upgrade your project's build setup to Webpack 5+ or migrate away from Vue CLI 4 to a newer build system like Vite.

affects: >=0.5.0

Errors

Common errors & fixes

ReferenceError: require is not defined

Attempting to use `unplugin-vue-jsx` with CommonJS `require()` syntax in configuration files or a Node.js environment that expects ESM.

fix

Update your configuration files to use ES Module `import` syntax. Ensure your project is set up for ESM, potentially by adding `"type": "module"` to `package.json` or using `.mjs` file extensions.

[Vue warn]: Failed to resolve component: div

Attempting to use `unplugin-vue-jsx` in a Vue 2 project, which is no longer supported, leading to JSX components not being correctly compiled or rendered.

fix

Ensure your project is using Vue 3. If you must use Vue 2, downgrade `unplugin-vue-jsx` to a version less than 0.7.0, e.g., `npm i -D unplugin-vue-jsx@^0.6.0`.

SyntaxError: Unexpected token '<' (for .tsx files)

TypeScript JSX (`.tsx`) files are not being correctly parsed because TypeScript transformation is no longer enabled by default.

fix

Explicitly configure the `parserOpts` in the plugin options to include the `typescript` plugin: `VueJsx({ parserOpts: { plugins: ['jsx', 'typescript'] } })`.

Your current Node.js version is X, but unplugin-vue-jsx requires >=20.19.0.

The Node.js environment where the build process is running does not meet the minimum version requirement.

fix

Upgrade your Node.js installation to version 20.19.0 or newer.

Upgrade

Version history

0.8.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/unplugin/unplugin-vue-jsx ↗

packagehttps://www.npmjs.com/package/unplugin-vue-jsx ↗