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
2
votes
1 answer

Why is esbuild not installed when creating new Rails 7 app with Bootstrap?

I create a new Rails 7 app using the following syntax in the command line: $ rails new app_name --css=bootstrap I get the following errors when the app is being created (only when including --css=bootstrap): Install esbuild run yarn add…
Rebecca
  • 88
  • 1
  • 9
2
votes
0 answers

Is it possible to detect the used bundler without a define

I'm have to use webpack and esbuild in a project and wanted to distinguish the used bundler in the generated files. Is there an easy way to do so without having to (manually) use the define options in each bundler?
doberkofler
  • 9,511
  • 18
  • 74
  • 126
2
votes
2 answers

Node module css import paths work in development, but not in production

I am moving from Webpack to esbuild with jsbundling-rails & cssbundling-rails. I have a folder which imports css libraries from vendors like so: @import "drift-zoom/dist/drift-basic.min.css"; @import "dropzone/dist/min/dropzone.min.css"; @import…
Pseudo-Hippy
  • 177
  • 11
2
votes
1 answer

No route matches [GET] "/assets/application.js & No route matches [GET] "/assets/application.css

I am moving away from Webpack to Esbuild, using jsbundling-rails and cssbundling-rails. Rails version is 6.1.5 Everything seems to be working fine, but in my logs I get: ActionController::RoutingError (No route matches [GET]…
Pseudo-Hippy
  • 177
  • 11
2
votes
3 answers

Vue 3 + Vite image URL becomes undefined after build

I encountered a bug where I dynamically generated a URL from props for image import in my Vue 3 component and it becomes undefined after build Script used to generate URL and the tag in Vue Component const imagePath = computed(() => { return new…
Ricey
  • 21
  • 1
  • 3
2
votes
0 answers

IntersectionType doesn't work with class-transformer decorators _when_ bundled via esbuild, even when esbuild plugins are used

So this question is related to IntersectionType doesn't work with class-transformer. In there the solution was to upgrade from nestjs 7 to 8 (effectively bumps up @nestjs/swagger from 4.5.12-next.1 to 5.1.2). Alas, that's not the end of the story.…
Adrian
  • 21
  • 3
2
votes
1 answer

TypeError: _vm(...).SyntheticModule is not a constructor

I am using esbuild-jest package as jest code transformer. jest.config.js: module.exports = { testEnvironment: 'jsdom', transform: { '\\.[jt]sx?$': 'esbuild-jest', }, }; index.ts: export default function myFunc(): string { return 'real…
Lin Du
  • 88,126
  • 95
  • 281
  • 483
2
votes
2 answers

Rails, ESBuild source map is always missing, but it is in the build

ActionController::RoutingError (No route matches [GET] "/assets/application.js-1246371c75312771378dc97fa604ef404c73f9b477b5eb8f4c6ebb2fd2e1e323.map"): My build script in package.json is: "build": "esbuild app/javascript/*.* --bundle --sourcemap…
David Lazar
  • 10,865
  • 3
  • 25
  • 38
2
votes
1 answer

Using bootstrap javascript in a Rails 7 app

I have a working Rails 7 app that uses esbuild as the JS bundler and have imported bootstrap. I am trying to figure out how to a access any Bootstrap Javascript functionality 'outside' the main application.js file - i.e. let's say I wanted to…
patschiboy
  • 1,091
  • 8
  • 21
2
votes
1 answer

How to use Local modules in remix-run application in yarn workspaces

i have a yarn workspace monorepo where different packages contain reusable code. like @pkg/styles , @pkg/ui-components all of these packages are es modules (import export statements) and are used in my non ssr application built by webpack like…
hannad rehman
  • 4,133
  • 3
  • 33
  • 55
2
votes
1 answer

How do you shim react-pdf with esbuild?

If you bundle react-pdf for the browser using esbuild today you will run into errors that prompt you to build for platform=node because zlib and stream are not available in the browser environment. I did find a conversation around how to swap this…
Toran Billups
  • 27,111
  • 40
  • 155
  • 268
2
votes
1 answer

esBuild serve over HTTPS

esBuild makes it pretty easy to serve http requests over it's own dev server, e.g. require('esbuild').serve({ servedir: 'www', }, { entryPoints: ['src/app.js'], outdir: 'www/js', bundle: true, }).then(server => { // Call "stop" on the web…
Yuriy Galanter
  • 38,833
  • 15
  • 69
  • 136
2
votes
1 answer

esbuild + knex: Cannot find module '../../dialects/mysql/index.js'

I'm currently trying to migrate some code from javascript to typescript. This code uses the knex package. I am able to build and run it using tsc, but i would like to use esbuild instead (for faster build). I build with: npx esbuild index.ts…
Hollyol
  • 827
  • 1
  • 13
  • 25
2
votes
1 answer

ng Build failing on angular 12.2.2

I created a project using Angular 12 and everything works fine. However, I get an issue when I try to build the project. I get the following error: ng build ⠋ Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015…
Richard Matovu
  • 501
  • 4
  • 15
2
votes
3 answers

esbuild: How to use `loader: { '.css': 'text' }` in combination with `minify: true` to get minified CSS as embedded text?

In my web project I import CSS as string: import stylesAsString from './my-styles.css' My build script uses esbuild: esbuild .build({ ... target: 'es2020', minify: true, loader: { '.css': 'text' }, ... }) Everything is…
Natasha
  • 516
  • 7
  • 24