Laravel Mix esbuild

1.1.0 verified Fri May 01 auth: no javascript

Laravel Mix extension to replace babel-loader with esbuild-loader, significantly speeding up JavaScript/TypeScript compilation. Current stable version is 1.1.0. It adds an `esbuild()` method to your Mix pipeline with presets for React, TypeScript, JSX. Requires laravel-mix ^6.0 as a peer dependency. Unlike babel-based setups, this leverages esbuild's native fast transforms but with limited tsconfig support and no Vue SFC support.

Common errors

error Cannot find module 'laravel-mix-esbuild' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install laravel-mix-esbuild --save-dev'.

error mix.esbuild is not a function ↓

cause The require('laravel-mix-esbuild') is missing or placed after mix is used.

fix

Ensure 'require('laravel-mix-esbuild')' is called before using mix.esbuild().

Warnings

gotcha Vue Single File Components (.vue) are NOT supported; Vue may work only without SFC. ↓

fix Use default babel-loader for Vue SFC or avoid using .vue files.

gotcha esbuild only supports a subset of TypeScript compiler options; tsconfig must have isolatedModules and esModuleInterop. ↓

fix Add 'isolatedModules': true and 'esModuleInterop': true to tsconfig.json.

gotcha React presets may require adding 'acorn' as a dependency. ↓

fix Run 'npm install acorn --save-dev'.

deprecated No breaking changes known; but note that esbuild-loader may have its own breaking changes. ↓

fix Check esbuild-loader changelog for breaking changes.

Install

npm install laravel-mix-esbuild

yarn add laravel-mix-esbuild

pnpm add laravel-mix-esbuild

Imports

default
wrong
```
import 'laravel-mix-esbuild'
```
correct
```
require('laravel-mix-esbuild')
```
This extension is designed for Laravel Mix's CommonJS environment; ESM import may not work.
mix.esbuild
wrong
```
mix.esbuild(true)
```
correct
```
mix.esbuild('preset', options)
```
The method is added to mix after requiring the extension; it can be called without arguments for defaults.
presets
wrong
```
mix.esbuild({ preset: 'react' })
```
correct
```
mix.esbuild('react')
```
Presets are strings passed as first argument; object syntax is not supported.

Quickstart

Shows basic setup: require the extension, then call esbuild() with a preset and options.

// webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-esbuild');
mix
    .js('resources/js/app.js', 'public/js')
    .esbuild('ts', { target: 'es2020' });