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
3
votes
2 answers

How to wrap Vite build in IIFE and still have all the dependencies bundled into a single file?

I'm building a chrome extension using Vite as my build tool. The main problem is during minification and mangling there are a lot of global variables created. After injecting my script to the page they conflict with already defined variables on…
Kamil Latosinski
  • 756
  • 5
  • 28
3
votes
0 answers

In Rails 7 with esbuild build, how do I run a script of esbuild fails?

I have this script that runs when running Rails 7 with esbuild build, this is inside package.json in the scripts attribute, it's ran from the Rails procfile: esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds however I often…
3
votes
1 answer

How to run Babel plugin after building with webpack/esbuild-loader?

I reduced HMR build time by roughly tenfold after swapping babel-loader to esbuild-loader in our Webpack React project. The problem: I haven't figured out how to replace the babel-plugin-styled-components ie how to add styled-components names as…
keijop
  • 91
  • 1
  • 10
3
votes
1 answer

Understanding how react-scripts start work

So i was moving my code to esbuild to fasten my builds. When I do so, my website looks weird (when I run using esbuild). I was comparing the diff between index.html of the webpack and esbuild and noticed that webpack one have this
Alwaysblue
  • 9,948
  • 38
  • 121
  • 210
3
votes
1 answer

vite: Adding static assets(with cache busting) to the build

I have large static files which should be busted with a hash for HTTP-caching. If I put them into the public directory, vite only copies them without appending a hash to the filenames. If I put them into the assets directory, vite ignores them,…
3
votes
1 answer

fire event from external controller

i'm moving to Rails 7 and i feel like there are so many changes but i'm confident on understanding them and be able to upgrade a personal applications i made myself for keeping my personal records and appointments More specific i need to communicate…
barone
  • 33
  • 4
3
votes
2 answers

Package not accessible from esbuild - What does this error mean?

While updating dependencies, I'm getting the following error: npm ERR! esbuild-android-64 not accessible from esbuild I cannot find any reference to it, apart from a single issue on ESBuild that is apparently resolved by updating to Node 16, which…
Dan Bowling
  • 1,205
  • 1
  • 15
  • 41
3
votes
0 answers

how to properly set up path for assets in esbuild

How should I configure path for assets in esbuild? My current config looks like so: const esbuild = require("esbuild"); esbuild.build({ bundle: true, entryPoints: ["src/index.tsx"], outdir: "public/build", splitting: true, minify: true, …
seven
  • 1,183
  • 14
  • 33
3
votes
3 answers

A way to load .wglsl files in Typescript files using esbuild?

I'm using esbuild as a tool to bundle my Typescript code but i can't find a way to configure a loader for ".wgsl" files. Mi app.ts file : import shader from './shader.wgsl'; //webgpu logic My shader.d.ts : declare module '*.wgsl'{ const value:…
Zentyk
  • 67
  • 8
3
votes
1 answer

How do you export globals in a bundle with esbuild?

I'm testing replacing Webpack 5 with esbuild. How do you export globals in a bundle? I have a single dependency, jQuery, but I will have more in the future. My esbuild script is: // build.js const esbuild = require('esbuild'); esbuild .build({ …
Uyghur Lives Matter
  • 18,820
  • 42
  • 108
  • 144
3
votes
1 answer

How to use React Routes with esbuild?

I'm using esbuild to create React app, its working good, but, when I tried to enable react-router on the app, it can be builder and works, but I'm not able to move between routes, the initial config: (async () => { const builder = await build({ …
3
votes
0 answers

How to configure Vite so that plugins can run correctly outside the root directory?

Background I want to start vite service in any directory to support test file preview。And: the test file will be resolved by testFilePlugin the testFilePlugin contains some code that depends on commonJS modules: import { Fragment } from…
aweiu
  • 390
  • 4
  • 12
3
votes
0 answers

Can i stop esbuild from emitting css file of my server part of my ssr app?

I have a SSR pet project, and recently i swaped from webpack to esbuild. But after bundling my app, i got another .css file from server part. Can i stop esbuild from doing that? package.json "scripts": { "client": "esbuild src/index.tsx…
Twep _
  • 53
  • 1
  • 4
3
votes
1 answer

Unable to add ant design stylesheets with tailwind in Rails 7

I created a Rails 7 app using rails new demo -j esbuild --css tailwind. I am using antd package for the components and want to use the ant design stylesheet along with the tailwind stylesheet. Tailwind has a way to add external stylesheets to its…
3
votes
0 answers

Rollup, Esbuild | "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"

Problem I'm currently facing an interesting issue when bundling my npm package (Typescript) for esm with the target ES2015. For bundling, I use rollup and esbuild. See GitHub; (Line 71-101) tsconfig.json { "extends": "../tsconfig.default.json", …
BennoDev
  • 1,067
  • 1
  • 6
  • 17