Questions tagged [esbuild]

esbuild is a fast bundler for JavaScript and its related languages (e.g. TypeScript, JSX, JSON, and CSS) with support for both the browser and node. This tag is specific for the esbuild bundler and is not used for general questions about bundling ES modules.

esbuild is a fast bundler for JavaScript and its related languages (e.g. TypeScript, JSX, JSON, and CSS, as well as some content formats, like Text and Binary, are all supported by default without needing to install plugins).

esbuild's primary goal is performance (claiming to be 104 times faster than webpack 5 in certain benchmarks), with ease-of-use and support for modern syntax listed as important secondary goals ("create an easy-to-use modern bundler along the way").

esbuild supports transforming modern JavaScript syntax into older equivalents based on specified target environments. Supported targets include:

  • All major browsers (e.g. chrome, edge, firefox, ie, safari, and others)
  • JavaScript language versions (e.g. "es2022")
  • node (e.g. "node12.19.0").

Note that support for very old targets (like ES5) is currently limited and may produce errors.

Useful Links

317 questions
17
votes
1 answer

Using Tailwind CSS with esbuild - the process

What does it mean to use a plugin to a bundler to perform some work, I mean I have no experience with bundlers whatsoever yet and I wanted to learn about that by creating a "professional" workflow with esbuild and tailwindcss with react, typescript…
seven
  • 1,183
  • 14
  • 33
15
votes
3 answers

How To Setup Custom ESBuild with SCSS, PurgeCSS & LiveServer?

Background: I have a Webpack setup that I use to preprocess SCSS with PurgeCSS with a live HMR server with esbuild-loader for speeding up compiles in Webpack but even then my compile times are still slow and I would like the raw-speed of ESBuild and…
Arslan Akram
  • 1,266
  • 2
  • 10
  • 20
14
votes
3 answers

ETXTBSY error when installing esbuild in Docker container

I'm encountering an error while trying to install the npm package "esbuild" in a Docker build process. The build was working fine previously, and I haven't made any significant changes recently. However, the build now fails with the following error…
Federico B.
  • 941
  • 8
  • 19
13
votes
0 answers

Cache transformed node modules with vite/esbuild

vite build uses esbuild to transform both the package dependencies (node modules) as well as the app source code into the target JavaScript specification, i.e. es2015. I observe that vite/esbuild re-transform the entire sources in ./node_modules…
Lars Blumberg
  • 19,326
  • 11
  • 90
  • 127
12
votes
4 answers

esbuild not bundling files

I am trying to use esbuild to bundle and minify my files in an npm project. It is minimizing every file that I pass in, but it is not bundling. It gives me the error that I must use 'outdir' when there are multiple files. However, this gives me…
Lee Morgan
  • 550
  • 1
  • 6
  • 26
11
votes
4 answers

When using esbuild with external react I get Dynamic require of "react" is not supported

I am trying to use esbuild with external react. here is my esbuild command in my package.json file "scripts": { "esbuild": "esbuild ./src/index.js --bundle --outfile=dist/esmain.js --loader:.js=jsx --external:react-dom --external:react " …
yigal
  • 3,923
  • 8
  • 37
  • 59
10
votes
1 answer

Vite production build errors: `...is not a constructor' for node_modules

I'm trying to do a build for a simple Vue-based project with Vite, but I am running into an error when actually processing the build. My vite.config.js file: import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import…
9
votes
4 answers

Get esbuild to watch for changes, rebuild, and restart express server

I am trying to create a simple SSR powered project using express + react. To do this, I need to simultaneously watch frontend and backend scripts during development. The goal here is to use express routes to point to react page components. Now, I…
jaxramus
  • 145
  • 2
  • 6
8
votes
3 answers

How to configure Vite to allow JSX syntax in JS files?

Vite does not allow usage of JSX syntax within .js files by default. I have already renamed my files to .jsx (or .tsx), but I have external dependencies that I cannot rename. Example error from Vite: ✘ [ERROR] The JSX syntax extension is not…
Soof Golan
  • 1,090
  • 2
  • 9
  • 13
8
votes
0 answers

Uncaught TypeError: Cannot read properties of null (reading 'useEffect')

Edit So, what turned out to be the problem? I had two instances of React and ReactDOM contributing to the served bundle of applicationB. I was misled in diagnosing the problem-space and therefore the question(s)/appeal raised below is a little…
slackermorris
  • 368
  • 3
  • 11
8
votes
2 answers

How do I ensure assets are present with Rail 7, cssbundling-rails, jsbundling-rails in test mode (RSpec)?

I'm upgrading a large, commercial (proprietary) Rails 6 application to Rails 7. We never used Webpacker, and are instead going directly from bundled gems for things like Bootstrap, to the "Rails 7 way". It turns out that the "no Node" workflow for…
Andrew Hodgkinson
  • 4,379
  • 3
  • 33
  • 43
8
votes
2 answers

ESBuild error: No loader is configured for ".node" files: node_modules/sharp/build/Release/sharp.node

I am trying to make an esbuild plugin that converts GIF to PNG using Sharp but I get the following error: ❯ npx esbuild .\src\utils\gif-to-png.ts --platform=node --bundle node_modules/sharp/lib/utility.js:7:22: error: No loader is configured for…
deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
7
votes
3 answers

Getting Angular to build with ESBuild

I'm running Angular 15.0.2 and have updated the angular.json to build with ESBuild. "serve": { "builder": "@angular-devkit/build-angular:browser-esbuild", Then when trying to serve the app: WARNING: The experimental esbuild-based builder is not…
Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
7
votes
2 answers

How to do multiple bundles with vite?

Using vite js to bundle my library, I need to provide two versions at the same time: production usage development specific code and warnings with devtools integration. When I was using webpack, I had: module.exports = [ …
Incepter
  • 2,711
  • 15
  • 33
7
votes
0 answers

Exclude / Include files for code splitting using esbuild

I'm using esbuild to build my web-components using lit. I'm now investigating code splitting to make my bundles smaller. I generate a lot of components( ~100 ) that all have the same import statement import { LitElement, html, nothing } from…
PEtter
  • 806
  • 9
  • 22
1
2 3
21 22