[@nrwl/esbuild]: Support for ESBuild plugins?

[Brodzko]

• I'd be willing to implement this feature (contributing guide)

Description

Is there any intention to support ESBuild plugins for the ESBuild executor?

I'd love to configure it to build and serve my React application but found no way I could set up loaders for example for SASS files.

Alternatively, if there is a way to do this already I'd be happy for some pointers :)

Motivation

Building/serving more complex projects.

Suggested Implementation

Alternate Implementations

[jamcoupe]

I have found a workaround using patch-package... be warned it's limited!

Create a directory called patches and then place the following patch file inside @nrwl+esbuild+15.3.3.patch. Then run npx patch-package.

Once the patch has applied successfully you can provide an "additionalOptions" property that points to an ES module file.

    "build": {
      "executor": "@nrwl/esbuild:esbuild",
      "options": {
        "additionalOptions": "libs/mylib/esbuild.mjs",
        ...
      }
    },

Then export additional esbuild options :)

// esbuild.mjs
import {sassPlugin} from 'esbuild-sass-plugin'

export default {
  plugins: [
    sassPlugin({
      type: "lit-css",
    })
  ]
};

Permanent fix?
I would be happy to create a permanent fix but I would need guidance on how the maintainers would want this to work. Currently the plugin is bundled down to commonjs which doesn't allow us to use import so we would be limited to using commonjs

[DerHerrGammler]

Is there any plans on implementing support for esbuild plugins? I want to switch from webpack to esbuild for the much better performance of it, but i realy need the plugin support for this.

[dsketch21]

+1 for adding plugins to the esbuild config block in the project.json.

[Hemesh-Unka]

@DerHerrGammler - I think there is talk about it coming in near future.

#15021

[iyobo]

raw esbuild is useless for Typescript when working with any of the major frameworks as they tend to depend on decorators, which the author of esbuild is not interesting in supporting evanw/esbuild#104 .

At least with plugins, this allows for use of a plugin that uses tsc when it encounters a ts file.

[jojoman2]

Based on #15021 and #16092, it looks like it should support plugins now? Or am I wrong?

I can't find any documentation about how its done though. If anybody could provide code for how to add for example this plugin it would be greatly appreciated.

[nick-kang]

Got this to work.

// build.cjs - esbuild config
const esbuildPluginPino = require('esbuild-plugin-pino')

/** @type {import('esbuild').BuildOptions}  */
module.exports = {
  plugins: [esbuildPluginPino({ transports: ['pino-pretty'] })],
  outdir: 'dist/packages/api'
}

// project.json
{
  "targets": {
    "build": {
      ...
      "options": {
        "outputPath": "dist/packages/api",
        "esbuildConfig": "{projectRoot}/build.cjs"
      },
      ...
    }
  },
}

The thing you have to watch out for is that outdir must be copied from the outputPath in your project.json or else you'll get a Must use "outdir" when there are multiple input files error.

[jahusa02]

Can't use the sentryEsbuildPlugin. It doesn't upload any Sourcemaps.

const { sentryEsbuildPlugin } = require('@sentry/esbuild-plugin');

require('esbuild').build({
  sourcemap: true,
  outdir: 'dist/apps/api',
  plugins: [
    sentryEsbuildPlugin({
      org: 'org',
      project: 'project',
      authToken: 'authToken',
      sourcemaps: {
        filesToDeleteAfterUpload: ['dist/apps/api/*.js.map'],
      },
      release: {
        name: 'release',
      },
    }),
  ],
});

And my project.json:

"build": {
      "executor": "@nx/esbuild:esbuild",
      "outputs": ["{options.outputPath}"],
      "options": {
        "platform": "node",
        "target": "esnext",
        "outputPath": "dist/apps/api",
        "main": "apps/api/src/main.ts",
        "tsConfig": "apps/api/tsconfig.prod.json",
        "esbuildConfig": "apps/api/esbuild.config.js",
        "sourcemap": true,
      },
      ...
}  

[lildesert]

I found a way to make sentryEsbuildPlugin work after playing a bit with the sources.

project.json

"build": {
      "executor": "@nx/esbuild:esbuild",
      "outputs": ["{options.outputPath}"],
      "options": {
        "esbuildConfig": "apps/workers/esbuild.config.js",
        "platform": "node",
        "outputPath": "dist/apps/workers",
        "format": ["cjs"],
        "main": "apps/workers/src/main.ts",
        "tsConfig": "apps/workers/tsconfig.app.json",
        "generatePackageJson": true,
        "sourcemap": true
      },

esbuild.config.js

const { sentryEsbuildPlugin } = require('@sentry/esbuild-plugin');

exports.sourcemap = true;
exports.outExtension = {
  '.js': '.js',
};
exports.plugins = process.env.SENTRY_AUTH_TOKEN
  ? [
      sentryEsbuildPlugin({
        disable: process.env.NODE_ENV !== 'production',
        authToken: process.env.SENTRY_AUTH_TOKEN,
        project: 'workers',
        release: {
          name: process.env.SENTRY_RELEASE,
          setCommits: {
            auto: true,
          },
          deploy: {
            env: process.env.SENTRY_ENVIRONMENT ?? 'staging',
          },
        },
        sourcemaps: {
          filesToDeleteAfterUpload: './**/*.map',
        },
      }),
    ]
  : [];

This require(userDefinedConfig) only picks up CJS exports: https://github.com/nrwl/nx/blob/master/packages/esbuild/src/executors/esbuild/lib/normalize.ts#L54

[MaxKless]

Hey everyone, since #16092 you can specify your own esbuild.config.js file and use whatever plugins you'd like :)