vue2-jsx-esbuild

1.2.1 verified Fri May 01 auth: no javascript

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.

Common errors

error ReferenceError: vue2JsxEsbuild is not defined ↓

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

error TypeError: vue2JsxEsbuild is not a function ↓

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

fix

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

Warnings

gotcha The 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';

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

gotcha The 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.

Install

npm install vue2-jsx-esbuild

yarn add vue2-jsx-esbuild

pnpm add vue2-jsx-esbuild

Imports

default

wrong

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

correct

import vue2JsxEsbuild from 'vue2-jsx-esbuild'

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

vue2JsxEsbuild

wrong

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

correct

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

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

ProvidePlugin usage

wrong

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

correct

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

ProvidePlugin requires array syntax to specify the default export.

Quickstart

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