Registry / web-framework / vue2-jsx-esbuild

vue2-jsx-esbuild

library1.2.1jsnpmunverified

A lightweight plugin (v1.2.1) enabling JSX syntax in Vue 2 projects when using esbuild-loader in Webpack. It provides a custom JSX factory function that transforms JSX into Vue 2 createElement calls. Key differentiator: allows esbuild-based bundling for Vue 2, which is faster than Babel. Released as-needed; no active development cycle. Requires manual Webpack configuration: set jsxFactory to 'vue2JsxEsbuild' and use ProvidePlugin to inject the default export. Note: not compatible with Vue 3 or other JSX runtimes, and no type definitions included.

web-framework http-networking

npm install vue2-jsx-esbuild

github ↗package ↗

INSTALL

IMPORT

SIG · VUE2-JSX-ESBUILD

vue2-jsx-esbuild

web-frameworkjavascriptv1.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

default

✓ import vue2JsxEsbuild from 'vue2-jsx-esbuild'

✗ const vue2JsxEsbuild = require('vue2-jsx-esbuild')

The package is ESM-only; use import or ProvidePlugin with 'default' property.

vue2JsxEsbuild

✓ const vue2JsxEsbuild = require('vue2-jsx-esbuild').default

✗ const vue2JsxEsbuild = require('vue2-jsx-esbuild')

In CommonJS, the default export is accessed via .default.

ProvidePlugin usage

✓ new webpack.ProvidePlugin({ vue2JsxEsbuild: ['vue2-jsx-esbuild', 'default'] })

✗ new webpack.ProvidePlugin({ vue2JsxEsbuild: 'vue2-jsx-esbuild' })

ProvidePlugin requires array syntax to specify the default export.

Configures esbuild-loader to use vue2JsxEsbuild as the JSX factory and injects the function via ProvidePlugin.

// webpack.config.js const webpack = require('webpack'); module.exports = { module: { rules: [ { test: /\.js$/, use: { loader: 'esbuild-loader', options: { loader: 'jsx', jsxFactory: 'vue2JsxEsbuild', target: 'es2015' }, }, }, ], }, plugins: [ new webpack.ProvidePlugin({ vue2JsxEsbuild: ['vue2-jsx-esbuild', 'default'] }) ] };

Debug

Known issues

gotchaThe package provides only a JSX factory function; it does not include type definitions for TypeScript.

fix

Install @types/vue2-jsx-esbuild or declare a module in a .d.ts file: declare module 'vue2-jsx-esbuild';

affects: >=1.0.0

gotchaIf using Webpack 5, the ProvidePlugin must specify the default export as an array; otherwise, the wrong export will be used.

fix

Use ['vue2-jsx-esbuild', 'default'] instead of just 'vue2-jsx-esbuild'.

affects: >=1.0.0

gotchaThe jsxFactory option in esbuild-loader must exactly match the global variable name provided by ProvidePlugin; any mismatch will result in 'vue2JsxEsbuild is not defined'.

fix

Ensure jsxFactory: 'vue2JsxEsbuild' matches the ProvidePlugin variable name.

affects: >=1.0.0

Errors

Common errors & fixes

ReferenceError: vue2JsxEsbuild is not defined

The global variable name expected by esbuild-loader's jsxFactory does not match the variable provided by ProvidePlugin.

fix

Ensure jsxFactory in esbuild options is exactly 'vue2JsxEsbuild' and ProvidePlugin uses the same name as key.

TypeError: vue2JsxEsbuild is not a function

ProvidePlugin is injecting the module itself instead of its default export.

fix

Use ProvidePlugin with array syntax: ['vue2-jsx-esbuild', 'default'].

Upgrade

Version history

1.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Fathands/vue2-jsx-esbuild ↗

packagehttps://www.npmjs.com/package/vue2-jsx-esbuild ↗