vite-plugin-react-esbuild

0.1.2 verified Fri May 01 auth: no javascript

A Vite plugin for React that uses esbuild for JSX/TSX transformation and babel for React Fast Refresh in development, and esbuild exclusively in production. Current stable version is 0.1.2. It aims to provide faster builds by leveraging esbuild where possible, with a similar API to @vitejs/plugin-react. Key differentiator: esbuild-based transform for both development and production, unlike @vitejs/plugin-react which uses babel for development. Release cadence is not well-defined, as it is a relatively new plugin.

Common errors

error Error: Cannot find module 'vite-plugin-react-esbuild' ↓

cause Package not installed or incorrect peer dependencies

fix

Run npm install vite-plugin-react-esbuild --save-dev and ensure vite and esbuild are installed.

error TypeError: react is not a function ↓

cause Importing the plugin as named export instead of default

fix

Use import react from 'vite-plugin-react-esbuild' (default import).

error Error: [vite] Cannot find module 'esbuild' ↓

cause esbuild peer dependency not installed

fix

Run npm install esbuild@>=0.14.51 --save-dev.

Warnings

breaking Requires Vite 3+ and esbuild >=0.14.51. Older versions are not supported. ↓

fix Update Vite to ^3.0.0 and esbuild to >=0.14.51.

deprecated The babel option is only for development; in production babel is not used. ↓

fix Use the babel option only for development-specific plugins; for production, configure esbuild options if needed.

gotcha Options are the same as @vitejs/plugin-react, but some options may not be fully supported due to esbuild limitations. ↓

fix Check the plugin's source code or issues for list of supported options.

gotcha React Refresh is only enabled in development; ensure you have a compatible setup. ↓

fix Do not rely on Fast Refresh in production builds.

Install

npm install vite-plugin-react-esbuild

yarn add vite-plugin-react-esbuild

pnpm add vite-plugin-react-esbuild

Imports

default

wrong

import { react } from 'vite-plugin-react-esbuild'

correct

import react from 'vite-plugin-react-esbuild'

The default export is the plugin function; named export does not exist.

ReactPluginOptions

wrong

import { ReactPluginOptions } from 'vite-plugin-react-esbuild'

correct

import type { ReactPluginOptions } from 'vite-plugin-react-esbuild'

Options type is exported as a named type, not a value. Use type import to avoid bundling.

require()

wrong

const { react } = require('vite-plugin-react-esbuild')

correct

const react = require('vite-plugin-react-esbuild')

CommonJS require returns the default export directly; destructuring is incorrect.

Quickstart

Shows how to configure the plugin in vite.config.ts with a typical setup.

// vite.config.ts
import { defineConfig } from 'vite'
import react from 'vite-plugin-react-esbuild'

export default defineConfig({
  plugins: [
    react({
      // Same options as @vitejs/plugin-react
      jsxImportSource: 'react',
      babel: {
        plugins: []
      }
    })
  ]
})