Chapter 11: With Esbuild

Core Idea

File-based routing under Esbuild uses @tanstack/router-plugin/esbuild's tanstackRouter function registered in the plugins array; React's setup is a simple config object, while Solid requires building a full esbuild.context with solidPlugin() plus a manual dev/build/watch script since Esbuild has no built-in dev server story like Vite.

Key Concepts

• @tanstack/router-plugin/esbuild: The Esbuild-specific plugin entry point.
• React config: A plain esbuild.config.js exporting { plugins: [tanstackRouter({ target: 'react', autoCodeSplitting: true })] }.
• Solid config: Requires manually constructing an esbuild.context() with entryPoints, outfile, bundle, format: 'esm', and both solidPlugin() and tanstackRouter({ target: 'solid', autoCodeSplitting: true }), then calling ctx.watch() + ctx.serve() in dev mode or ctx.rebuild() + ctx.dispose() for production builds.
• Same defaults and ignore-file guidance: Identical routesDirectory/generatedRouteTree/routeFileIgnorePrefix/quoteStyle defaults and Prettier/ESLint/Biome/VSCode ignore recommendations as the other bundler chapters.

Code Examples

// esbuild.config.js
import { tanstackRouter } from '@tanstack/router-plugin/esbuild'

export default {
  plugins: [
    tanstackRouter({
      target: 'react',
      autoCodeSplitting: true,
    }),
  ],
}

• What it demonstrates: Minimal Esbuild config for React file-based routing with auto code splitting.

Key Takeaways

1. Esbuild's React integration is a plain config object like Webpack's; Solid requires writing an explicit build/serve/watch script since Esbuild lacks a built-in dev server.
2. Use ctx.watch() + ctx.serve() for development and ctx.rebuild() + ctx.dispose() for one-off production builds when using the Solid esbuild.context approach.
3. Configuration defaults and ignore-file guidance remain identical across all four bundler-specific chapters (Vite, Rspack, Webpack, Esbuild).

Connects To

• Ch 8-10: Vite, Rspack, and Webpack chapters cover the same @tanstack/router-plugin package for other bundlers.
• Ch 12: With Router CLI is the fallback for bundlers not covered by a dedicated plugin.