@nx/node using webpack: custom tsconfig paths not loaded for incremental builds

[JoshuaCWebDeveloper]

Current Behavior

When a newly created webpack app is configured to use incremental builds with buildLibsFromSource: false, libraries that it imports using a custom tsconfig paths entry are not resolved.

Expected Behavior

Webpack apps should resolve libraries imported using entries defined in tsconfig paths.

GitHub Repo

https://github.com/JoshuaCWebDeveloper/debug-nx-webpack-tsconfig-paths

Steps to Reproduce

$ npx create-nx-workspace@latest

$ npx nx g @nx/js:library util-lib

3. Create custom paths entry in tsconfig.base.json:

"@custom/my-util": ["util-lib/src/index.ts"]

$ npx nx g @nx/node:application webpack-app --bundler webpack

5. Bug workaround: add ajv@8 dependency to package.json:

"ajv": "^8.12.0",

6. Update packages/webpack-app/src/main.ts:

import { utilLib } from '@custom/my-util';
import * as utilLibImport from '@debug-nx-webpack-tsconfig-paths/util-lib';

console.log('Hello World');
console.log(utilLib());
console.log(utilLibImport);

7. Update packages/webpack-app/webpack.config.js:

buildLibsFromSource: false,

$ npx nx serve webpack-app

Nx Report

NX   Report complete - copy this into the issue template

Node           : 23.3.0
OS             : linux-x64
Native Target  : x86_64-linux
npm            : 10.9.0

nx                 : 20.4.6
@nx/js             : 20.4.6
@nx/jest           : 20.4.6
@nx/eslint         : 20.4.6
@nx/workspace      : 20.4.6
@nx/devkit         : 20.4.6
@nx/esbuild        : 20.4.6
@nx/eslint-plugin  : 20.4.6
@nx/node           : 20.4.6
@nx/web            : 20.4.6
@nx/webpack        : 20.4.6
typescript         : 5.7.3
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/jest/plugin
@nx/webpack/plugin

Failure Logs

> nx run webpack-app:build

> webpack-cli build --node-env=production

chunk (runtime: main) main.js (main) 711 bytes [entry] [rendered]

ERROR in ./src/main.ts 4:18-44
Module not found: Error: Can't resolve '@custom/my-util' in '/home/joshua/WebDev/projects/nx/debug-nx-webpack-tsconfig-paths/webpack-app/src'

webpack compiled with 1 error (651e19a49e926f4c)
Warning: command "webpack-cli build --node-env=production" exited with non-zero status code

Package Manager Version

No response

Operating System

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

Additional Information

Although not demonstrated in this reproduction, the most common way to experience this error is likely from defining wildcard * entries in tsconfig.base.json and not having them be resolved by webpack on incremental builds. This has been a commonly reported issue, so it's worth noting that loading tsconfig paths wildcard entries has been correctly implemented for nx/node targets using webpack, and should work fine once either this issue is fixed or the workaround I'll post in the replies is implemented.

[JoshuaCWebDeveloper]

This issue is caused by Nx not correctly resolving a relative path to the app's tsconfig to the workspace root. The workaround for this issue is to create an additional tsconfig file that will correctly resolve relative to project root and have it extend your app's tsconfig file.

For example, if you have an app called myapp with a tsconfig located at apps/myapp/tsconfig.app.json, then you should create the following file: apps/myapp/apps/myapp/tsconfig.app.json with the following contents:

{
  "extends": "../../tsconfig.app.json"
}