react-app-rewired-esbuild

0.0.11 verified Fri May 01 auth: no javascript

A plugin for react-app-rewired that replaces Babel and Terser with esbuild for faster builds in Create React App projects. Current version 0.0.11 is stable but young, with low community adoption. Key differentiator: minimal config integration into existing react-app-rewired setups. Compared to alternatives like CRACO or custom Webpack config, it offers an easy drop-in replacement. Release cadence is low; latest version unchanged since 2021. Not recommended for production due to missing React JSX transform auto-injection.

Common errors

error ReferenceError: React is not defined ↓

cause esbuild does not automatically inject the React import declaration for JSX files, unlike Babel's classic runtime.

fix

Add 'import React from 'react' at the top of each JSX file, or enable automatic JSX runtime in esbuild options (e.g., loader: 'jsx', jsxFactory: 'React.createElement', jsxFragment: 'React.Fragment').

error Module not found: Can't resolve 'react-app-rewired' ↓

cause react-app-rewired is a peer dependency that must be installed separately.

fix

Run 'npm i react-app-rewired --save-dev' or 'yarn add react-app-rewired --dev'.

error TypeError: rewiredEsbuild is not a function ↓

cause Imported the default export incorrectly, e.g., using destructuring with named import.

fix

Use 'const rewiredEsbuild = require('react-app-rewired-esbuild');' without curly braces.

error Error: Cannot find module 'esbuild-loader' ↓

cause esbuild-loader is a transitive dependency that was not installed or resolved properly.

fix

Run 'npm i esbuild-loader --save-dev' or ensure your npm/yarn resolutions include it.

Warnings

gotcha JSX files may fail with 'ReferenceError: React is not defined' since esbuild does not auto-inject the React import. ↓

fix Add 'import React from 'react' at the top of every JSX file, or use esbuild's automatic JSX runtime injection via jsxFactory and jsxFragment.

deprecated The underlying esbuild-loader is being superseded by direct esbuild integration in newer build tools, but this package has not been updated since 2021. ↓

fix Consider using CRACO with esbuild-loader directly, or migrate to Vite (which uses esbuild natively).

gotcha This package only works with CRA projects that use react-app-rewired. It does not support react-scripts@5 or higher without additional compatibility fixes. ↓

fix Check react-scripts version; for v5, you may need to patch config-overrides.js or use an alternative like CRACO.

breaking Options passed to rewiredEsbuild override the entire default configuration; merging with existing override config may be destructive. ↓

fix Ensure that rewiredEsbuild() is called last in the override chain after any other config modifications.

gotcha Esbuild's CSS support is experimental; CSS imports may behave differently or fail in production builds. ↓

fix Use onlyMinimizer: true for production to avoid CSS processing issues, or handle CSS separately.

Install

npm install react-app-rewired-esbuild

yarn add react-app-rewired-esbuild

pnpm add react-app-rewired-esbuild

Imports

default (function rewiredEsbuild)

wrong

const { rewiredEsbuild } = require('react-app-rewired-esbuild');

correct

const rewiredEsbuild = require('react-app-rewired-esbuild');

default export is a function; named import will fail. CJS only, no ESM export.

rewiredEsbuild (Customize CRA pattern)
wrong
```
module.exports = override(rewiredEsbuild);
```
correct
```
module.exports = override(rewiredEsbuild());
```
rewiredEsbuild must be called (returns a function) when used with customize-cra's override.

ESBuildLoaderOptions

wrong

rewiredEsbuild({ ESBuildLoaderOptions: { loader: 'tsx' } })

correct

rewiredEsbuild({ loader: 'tsx', target: 'es2020' })

Options are passed directly as first argument, not nested under a property name.

Quickstart

Overriding CRA config with react-app-rewired to use esbuild for faster development builds.

// config-overrides.js
const rewiredEsbuild = require('react-app-rewired-esbuild');

module.exports = function override(config, env) {
  // add your other config overrides here
  return rewiredEsbuild()(config, env);
};