nuxt-esbuild

1.0.4 verified Fri May 01 auth: no javascript

A Nuxt module that enables esbuild to transpile JavaScript and TypeScript, speeding up development builds. Current version 1.0.4. It uses esbuild-loader for fast transpilation during development, and optionally for TypeScript, while still applying Babel for production builds to ensure browser compatibility. Similar to Vite's approach. Provides faster dev builds compared to Babel-only or ts-loader setups.

Common errors

error Module 'nuxt-esbuild' not found ↓

cause Package not installed or incorrect import path

fix

npm install nuxt-esbuild and add 'nuxt-esbuild' to buildModules in nuxt.config.js

error esbuild-loader requires Webpack 4 or higher ↓

cause Using older Webpack version

fix

Upgrade Webpack to 4+ or use a compatible version of esbuild-loader

error Cannot read property 'raw' of undefined ↓

cause Missing or malformed tsconfigRaw option

fix

Ensure tsconfig.json exists and path is correct, or omit tsconfigRaw if not needed

Warnings

gotcha esbuild is only used in development mode. Production builds use Babel for JavaScript. ↓

fix Do not rely on esbuild for production. Ensure Babel configuration is correct for production builds.

gotcha When using TypeScript, both esbuild and Babel will transpile code (esbuild first, then Babel). This may cause issues if Babel plugins are incompatible with esbuild's output. ↓

fix Review Babel plugins and ensure they work with esbuild-transpiled code. Consider using only esbuild for TypeScript if possible.

gotcha The module uses esbuild-loader, which requires Webpack 4 or 5 (Nuxt's default). Ensure compatibility with your Webpack version. ↓

fix Check Nuxt and Webpack versions. Upgrade if necessary.

deprecated For Nuxt 3, the buildModules array is replaced by modules. Using buildModules in Nuxt 3 will cause a warning. ↓

fix Use modules: ['nuxt-esbuild'] for Nuxt 3.

Install

npm install nuxt-esbuild-module

yarn add nuxt-esbuild-module

pnpm add nuxt-esbuild-module

Imports

nuxt-esbuild
wrong
```
const NuxtEsbuild = require('nuxt-esbuild')
```
correct
```
import 'nuxt-esbuild'
```
Nuxt modules are added as strings in buildModules, not imported as functions.
module registration
wrong
```
modules: ['nuxt-esbuild']
```
correct
```
buildModules: ['nuxt-esbuild']
```
For Nuxt 2, use buildModules to avoid running on production server. For Nuxt 3, use modules.

default import

wrong

import { NuxtEsbuild } from 'nuxt-esbuild'

correct

import NuxtEsbuildModule from 'nuxt-esbuild'

This module exports a function as default, not a named export.

Quickstart

Configure nuxt-esbuild module with TypeScript support in nuxt.config.js. Shows how to add module and specify esbuild options.

// nuxt.config.js
const path = require('path')

export default {
  buildModules: ['nuxt-esbuild'],
  esbuild: {
    loader: 'ts', // or 'js' for JavaScript only
    tsconfigRaw: require(path.resolve(__dirname, 'tsconfig.json')),
  },
}