Root-relative deploy URL fails with TypeError: Invalid URL

[jjaanila]

Current Behavior

I'm in the process of doing a major version upgrade from nx@20.7.1 to nx@21.5.2. After fixing breaking changes, I encountered an issue with our pull request preview build. We used to be able to do following:

npx nx run project:build:production --outputPath dist/apps/project/feature/feature_name --deploy-url /feature/feature_name/

But with 21.5.2 that results in URL validation error.

Expected Behavior

The build should succeed.

GitHub Repo

No response

Steps to Reproduce

1. Our project uses nx/webpack, nx/react and related libraries.
2. Build with webpack and set deploy-url argument as root-relative value.
3. inputUrls in node_modules/@nx/webpack/src/utils/webpack/plugins/postcss-cli-resources.js need to be relative, but I'm not sure what affects that.
4. The build fails, because URL constructor validation considers the input as invalid.

Nx Report

Node           : 20.17.0
OS             : darwin-arm64
Native Target  : aarch64-macos
npm            : 10.8.2

nx                     : 21.4.0
@nx/js                 : 21.4.0
@nx/jest               : 21.4.0
@nx/eslint             : 21.4.0
@nx/workspace          : 21.4.0
@nx/cypress            : 21.4.0
@nx/devkit             : 21.4.0
@nx/eslint-plugin      : 21.4.0
@nx/module-federation  : 21.4.0
@nx/react              : 21.4.0
@nx/rollup             : 21.4.0
@nx/storybook          : 21.4.0
@nx/web                : 21.4.0
@nx/webpack            : 21.4.0
typescript             : 5.8.3
---------------------------------------
Cache Usage: 40.84 MB / 92.64 GB

Failure Logs

node:internal/url:797
    this.#updateContext(bindingUrl.parse(input, base));

    TypeError: Invalid URL
    at new URL (node:internal/url:797:36)
    at Array. (/Users/janne/git/project/node_modules/@nx/webpack/src/utils/webpack/plugins/postcss-cli-resources.js:100:33)
    at runCallbacks (/Users/janne/git/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:45:15)
    at /Users/janne/git/project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:279:5
    at /Users/janne/git/project/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) {
    code: 'ERR_INVALID_URL',
    input: 'roboto-cyrillic-ext-700-normal.be4d02458ce53887dc37.woff2',
    base: '/feature/feature_name/'

Package Manager Version

No response

Operating System

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

Additional Information

#32399 this seems to be the change causing the issue.

As a workaround, I downgraded to 21.4.0, which works as well as 20.7.1.