{"id":26625,"library":"vue2-jsx-esbuild","title":"vue2-jsx-esbuild","description":"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.","status":"active","version":"1.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/Fathands/vue2-jsx-esbuild","tags":["javascript","vue2","jsx","esbuild-loader","esbuild"],"install":[{"cmd":"npm install vue2-jsx-esbuild","lang":"bash","label":"npm"},{"cmd":"yarn add vue2-jsx-esbuild","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue2-jsx-esbuild","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package is ESM-only; use import or ProvidePlugin with 'default' property.","wrong":"const vue2JsxEsbuild = require('vue2-jsx-esbuild')","symbol":"default","correct":"import vue2JsxEsbuild from 'vue2-jsx-esbuild'"},{"note":"In CommonJS, the default export is accessed via .default.","wrong":"const vue2JsxEsbuild = require('vue2-jsx-esbuild')","symbol":"vue2JsxEsbuild","correct":"const vue2JsxEsbuild = require('vue2-jsx-esbuild').default"},{"note":"ProvidePlugin requires array syntax to specify the default export.","wrong":"new webpack.ProvidePlugin({ vue2JsxEsbuild: 'vue2-jsx-esbuild' })","symbol":"ProvidePlugin usage","correct":"new webpack.ProvidePlugin({ vue2JsxEsbuild: ['vue2-jsx-esbuild', 'default'] })"}],"quickstart":{"code":"// webpack.config.js\nconst webpack = require('webpack');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: {\n          loader: 'esbuild-loader',\n          options: {\n            loader: 'jsx',\n            jsxFactory: 'vue2JsxEsbuild',\n            target: 'es2015'\n          },\n        },\n      },\n    ],\n  },\n  plugins: [\n    new webpack.ProvidePlugin({\n      vue2JsxEsbuild: ['vue2-jsx-esbuild', 'default']\n    })\n  ]\n};","lang":"javascript","description":"Configures esbuild-loader to use vue2JsxEsbuild as the JSX factory and injects the function via ProvidePlugin."},"warnings":[{"fix":"Install @types/vue2-jsx-esbuild or declare a module in a .d.ts file: declare module 'vue2-jsx-esbuild';","message":"The package provides only a JSX factory function; it does not include type definitions for TypeScript.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use ['vue2-jsx-esbuild', 'default'] instead of just 'vue2-jsx-esbuild'.","message":"If using Webpack 5, the ProvidePlugin must specify the default export as an array; otherwise, the wrong export will be used.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure jsxFactory: 'vue2JsxEsbuild' matches the ProvidePlugin variable name.","message":"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'.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure jsxFactory in esbuild options is exactly 'vue2JsxEsbuild' and ProvidePlugin uses the same name as key.","cause":"The global variable name expected by esbuild-loader's jsxFactory does not match the variable provided by ProvidePlugin.","error":"ReferenceError: vue2JsxEsbuild is not defined"},{"fix":"Use ProvidePlugin with array syntax: ['vue2-jsx-esbuild', 'default'].","cause":"ProvidePlugin is injecting the module itself instead of its default export.","error":"TypeError: vue2JsxEsbuild is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}