ESBuild executor's `esbuildConfig` property does not work with TS/JS files

[chapo2501]

Current Behavior

The normalize code (below) seems to be made only for JSON files, as it won't handle a named export or a default esport.

nx/packages/esbuild/src/executors/esbuild/lib/normalize.ts

Line 91 in 840aef8

userDefinedBuildOptions = require(userDefinedConfig);

nx/packages/esbuild/src/executors/esbuild/lib/build-esbuild-options.ts

Line 29 in 840aef8

...options.userDefinedBuildOptions,

I believe something like would work for JS, but still needs something for TS.

const userDefinedConfigContents = require(userDefinedConfig);
userDefinedBuildOptions = 
  userDefinedConfigContents.default 
    ? userDefinedConfigContents.default 
    : userDefinedConfigContents;

Errors I had:

• Using a TS config file:

SyntaxError: Missing initializer in const declaration
    at compileSourceTextModule (node:internal/modules/esm/utils:338:16)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:353:18)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1385:24)
    at Module._compile (node:internal/modules/cjs/loader:1536:5)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.require (node:internal/modules/cjs/loader:1311:12)

• Using a JS file with export default (config received by ESBuild):

{
  "__esModule": true,
  "default": { // THIS IS THE ISSUE (sorry caps)
    "entryPoints": [
      "./src/main.ts"
    ],
    "tsconfig": "./tsconfig.app.json",
    "outfile": "./dist/runner-by-nx.js",
    "bundle": true,
    "platform": "node",
    "target": "es2021",
    "define": {
      "process.env.NODE_ENV": "\"production\""
    },
    "sourcemap": true,
    "plugins": []
  },
  "entryNames": "[dir]/[name]",
  "bundle": true,
  "external": [
    "esbuild"
  ],
  "minify": false,
  "platform": "node",
  "target": "esnext",
  "metafile": false,
  "tsconfig": "apps/proj/tsconfig.app.json",
  "sourcemap": false,
  "format": "cjs",
  "outExtension": {
    ".js": ".cjs"
  },
  "outfile": "dist/runner__nx-esbuild-with-my-config.cjs",
  "entryPoints": [
    "apps/proj/src/main.ts"
  ]
}

• Using JS but a different export name:

  "someWeirdNameExport": {
    "entryPoints": [
      "./src/main.ts"
    ],
    "tsconfig": "./tsconfig.app.json",
    "outfile": "./dist/runner-by-nx.js",
    "bundle": true,
    "platform": "node",
    "target": "es2021",
    "define": {
      "process.env.NODE_ENV": "\"production\""
    },
    "sourcemap": true,
    "plugins": []
  },
  "entryNames": "[dir]/[name]",
  "bundle": true,
  "external": [
    "esbuild"
  ],
  "minify": false,
  "platform": "node",
  "target": "esnext",
  "metafile": false,
  "tsconfig": "apps/proj/tsconfig.app.json",
  "sourcemap": false,
  "format": "cjs",
  "outExtension": {
    ".js": ".cjs"
  },
  "outfile": "dist/runner__nx-esbuild-with-my-config.cjs",
  "entryPoints": [
    "apps/proj/src/main.ts"
  ]
}

Expected Behavior

My goal, in the repo, is having nx run proj:esbuild-original or nx run proj:esbuild behaving just like nx run proj:build does.

Ideally, if I set a esbuildConfig, no other configs be required.

GitHub Repo

https://github.com/chapo2501/nx-esbuild-issues

Steps to Reproduce

1. yarn
2. nx run proj:build
3. nx run proj:esbuild-original --verbose
4. nx run proj:esbuild

Nx Report

NX   Report complete - copy this into the issue template

Node           : 22.14.0
OS             : darwin-arm64
Native Target  : aarch64-macos
yarn           : 1.22.22

nx (global)        : 20.3.1
nx                 : 20.8.0
@nx/js             : 20.8.0
@nx/jest           : 20.8.0
@nx/eslint         : 20.8.0
@nx/workspace      : 20.8.0
@nx/devkit         : 20.8.0
@nx/esbuild        : 20.8.0
@nx/eslint-plugin  : 20.8.0
@nx/node           : 20.8.0
typescript         : 5.7.3
---------------------------------------
Registered Plugins:
@nx/js/typescript
@nx/eslint/plugin
@nx/jest/plugin
---------------------------------------
Cache Usage: 3.03 KB / 46.04 GB

Failure Logs

Package Manager Version

yarn

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[moatorres]

I'm wondering if this would fix your issue. I'll try to test it locally later today. Happy to send a PR if it does.

let userDefinedBuildOptions;
if (options.esbuildConfig) {
    const userDefinedConfig = path.resolve(context.root, options.esbuildConfig);
    if (options.esbuildOptions) {
        throw new Error(`...`);
    }
    if (!fs.existsSync(userDefinedConfig)) {
        throw new Error(`...`);
    }
    // lines below
    if (path.extname(userDefinedConfig) === '.js' && require(userDefinedConfig)?.default) {
        userDefinedBuildOptions = require(userDefinedConfig).default;
    } else { 
        userDefinedBuildOptions = require(userDefinedConfig);
    }
}

Or:

let userDefinedBuildOptions;
if (options.esbuildConfig) {
  const userDefinedConfig = path.resolve(context.root, options.esbuildConfig);
  ...
  // lines below
  switch (path.extname(userDefinedConfig)) {
    case ".js":
      const required = require(userDefinedConfig);
      if (required?.default) {
        userDefinedBuildOptions = required.default;
      } else {
        throw new Error(`esbuildConfig config file must export a default object: ${userDefinedConfig}`);
      }
      break;
    case ".ts":
      throw new Error(`esbuildConfig config '.ts' files are not supported: ${userDefinedConfig}`);
    default:
      userDefinedBuildOptions = require(userDefinedConfig);
      break;
  }
}

[chapo2501]

I think the 2nd one is more elegant, but would also check if default is set (in case developer is using named export), to be clear that it is expected to be default.

About best solution, I defer it to people more experienced with NX to follow the standards 😄

[moatorres]

I think the 2nd one is more elegant, but would also check if default is set (in case developer is using named export), to be clear that it is expected to be default.

Spot on! Edited my previous comment.

Adding for future reference: https://discord.com/channels/1143497901675401286/1364526891595333707

[chapo2501]

@moatorres I like the 2nd code more as configuration errors are explictly thrown, instead of ignored like the 1st code