esbuild - paths from tsconfig.base.json do not work properly in the build output

[th1nkful]

Current Behavior

When using imports that have similar paths, esbuild will not output a manifest in main.js that properly allows importing all libs if they are ordered in certain orders in the tsconfig.base.json

For example:

The following paths in tsconfig.base.json will not order correctly in the manifest generated for here:

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

Line 246 in 32baa4d

const manifest = ${JSON.stringify(manifest)};

"path": {
      "@worklabs/db": ["libs/db/core/src/index.ts"],
      "@worklabs/db/migrations": ["libs/db/migrations/src/index.ts"],
      "@worklabs/db/models": ["libs/db/models/src/index.ts"],
}

Because @worklabs/db was first in paths, any imports when going through the hijacked _resolveFilename that were @worklabs/db/migrations or @worklabs/db/models were directed to @worklabs/db files which did not work

Interestingly, ts in VSCode found no issues with the order of paths. Nor did serve using @nx/js:node

Expected Behavior

If I have the above entries, they should be sorted so that the longer ones are first and do not mistakenly get matched to the wrong import

Locally, I was able to fix this behaviour by editing getRegisterFileContent function to sort by whole string length first like so

const sortedKeys = Object.keys(paths)
      .sort((a, b) => b.length - a.length)
      .sort((a, b) => getPrefixLength(b) - getPrefixLength(a));

GitHub Repo

No response

Steps to Reproduce

1. Add libs that use subpaths, adding the longer ones secondary
2. Try build with esbuild
3. Try use the build with the outputs

Nx Report

Convert compiler options from json failed, No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["node_modules/jest-extended/types/index.d.ts"]' and 'exclude' paths were '["node_modules","dist","build","coverage"]'.

 >  NX   Report complete - copy this into the issue template

   Node   : 20.10.0
   OS     : darwin-arm64
   pnpm   : 8.11.0
   
   nx (global)        : 17.2.0
   nx                 : v17.2.5
   @nx/js             : v17.2.5
   @nx/jest           : 17.2.0
   @nx/linter         : v17.2.5
   @nx/eslint         : v17.2.5
   @nx/workspace      : v17.2.5
   @nx/cypress        : v17.2.5
   @nx/devkit         : v17.2.5
   @nx/esbuild        : 17.2.0
   @nx/eslint-plugin  : v17.2.5
   @nx/node           : v17.2.5
   @nx/react          : v17.2.5
   @nx/storybook      : v17.2.5
   @nrwl/tao          : v17.2.5
   @nx/vite           : v17.2.5
   @nx/web            : v17.2.5
   @nx/webpack        : 17.2.0
   typescript         : 5.3.3
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nx/[email protected]
     - @nrwl/[email protected]
     - @nx/[email protected]
     - @nrwl/[email protected]
     - @nx/[email protected]
     - @nrwl/[email protected]
   
   To fix this, run `nx migrate [email protected]`

Failure Logs

Depending on the module we get different errors:

If the output is valid, but the contents are different we get something like: 

migrations.runMigrations is not a function

Otherwise we get errors about reading a property of undefined

Package Manager Version

8.11.0

Operating System

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

Additional Information

We picked this up while migrating to NX for "almost-monorepo" (code was all in one repo, but structure and tooling was lagging), so this wasn't something that was working before and now doesn't

[th1nkful]

Let me know if there is something more I can do to help here out

My short term fix has been to sort my "paths" config in tsconfig.base.json so that it has the longer in those situations at the top. This seems to work but isn't a great long term experience as Nx inserts into paths where it wants to so will be something we have to keep an eye on as new libs are added

[jelling]

Interestingly, ts in VSCode found no issues with the order of paths. Nor did serve using @nx/js:node

In my case, the issue was also happening with serve using @nx/js:node. I'm manually fixing the sort for the moment.

[th1nkful]

@jelling I would recommend adding a quick script you can run to sort the paths by length (that’s what we did)

every time you make Nx change (add a lib for example) it reorders the paths and you have to manually fix it up. Sorting by length with a script makes it trivial to fix the order - just my 2c

[jelling]

Are you running this script manually or as part of the build process? If the latter, could you please show an example? Thanks.

[th1nkful]

@jelling atm we are just running it manually as we don’t add a lot of libs

We aren’t doing this but you could add a target using nx run-command and make that a dependency of your build job. Could do something like what was discussed here: #9054

[jelling]

@th1nkful could you please share the script?

[th1nkful]

@jelling sure! We just use ts-node to run this from scripts in our package.json

"tspaths:sort": "ts-node ./tools/nx-tsconfig-paths-fix/index.ts"

import fs from 'fs';
import path from 'path';

const tsconfigPath = path.resolve(__dirname, '../../tsconfig.base.json');
const file = fs.readFileSync(tsconfigPath, 'utf8');
const config = JSON.parse(file);

const paths = config.compilerOptions.paths;
const newPaths: Record<string, any> = {};

const keys = Object.keys(paths);
keys.sort((a, b) => {
  const lengthCompare = b.length - a.length;
  if (lengthCompare !== 0) return lengthCompare;
  return a.localeCompare(b);
});

for (const key of keys) {
  newPaths[key] = paths[key];
}

config.compilerOptions.paths = newPaths;

fs.writeFileSync(tsconfigPath, JSON.stringify(config, null, 2));

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.