Native federation crashes when used with Tailwindcss

[shankaryadavy9]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

Using TailwindCSS with Native Federation on the latest Angular stack causes the build to crash with a Node.js ERR_INVALID_ARG_VALUE error during stylesheet processing. The error is

INFO [Federation SSE] Local reloader initialized with endpoint /@angular-architects/native-federation:build-notifications
INFO Building federation artefacts
node:internal/modules/cjs/loader:1966
throw new ERR_INVALID_ARG_VALUE('filename', filename,
^
TypeError [ERR_INVALID_ARG_VALUE]: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received './'
at createRequire (node:internal/modules/cjs/loader:1966:13)
at StylesheetPluginFactory.initPostcss (C:\Users\Shankar\Documents\demo\fed-testing\node_modules@angular\build\src\tools\esbuild\stylesheets\stylesheet-plugin-factory.js:153:78) {
code: 'ERR_INVALID_ARG_VALUE'
}

Node.js v24.0.0

This happens consistently during federation artefact generation.

You can reproduce by cloning the repo from here https://github.com/shankaryadavy9/fed-testing.git

Expected behavior

latest Native federation and TailwindCSS should work seamlessly

Versions of Native/Module Federation, Angular, Node, Browser, and operating system

Node --version : v24.0.0
Angular --version :21.0.4
OS: Windows 11
Browser: Chrome latest
Tailwindcss@4.1.18 installed using ng add tailwindcss

Native federation : 21.0.3 installed and initiated using

npm i @angular-architects/native-federation -D

ng g @angular-architects/native-federation:init --project fed-testing --port 4200 --type dynamic-host

Other information

If I remove native federation Tailwindcss works perfectly

I would be willing to submit a PR to fix this issue

• Yes
• No

[shankaryadavy9]

When I debugged the file where it crashed
node_modules/@angular/build/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js

If we do not use Native Federation, at line ~145 the configPath variable gets an absolute path, like:

C:\Users\...\fed-testing\.postcssrc.json

So this line works as expected because createRequire requires an absolute path:

const postCssPluginRequire = createRequire(dirname(configPath) + '/');

But when Native Federation is enabled, the same configPath variable becomes a relative path, like:

.postcssrc.json

As a result, dirname(configPath) resolves to ".", and createRequire('./') is called, which breaks with:

ERR_INVALID_ARG_VALUE: The argument 'filename' must be a file URL object,
file URL string, or absolute path string

So it looks like Native Federation changes the build context in a way that causes the PostCSS configPath to remain relative instead of absolute, which then exposes an assumption in Angular’s esbuild stylesheet plugin.

[Dung288-806]

Hi @shankaryadavy9,
The same the my issuse: Link

Wait for the next step

[berkon]

I can confirm! I see exactly the same issue here. First I thought it might be related to angular-cli not handling the path correctly and had created an issue there (angular/angular-cli#32202). But the guys pointed me back to Native Federation. I wrote down some of my findings in that issue. One thing I noticed was that when downgrading to Native Federation 20.x.x the issue disappears.

[Aukevanoost]

Hi all! the fix should be live in v21.0.4 which was just released 🥳

[DungDD10]

Hi @Aukevanoost,

Thank you, I have successfully set up the project with the latest versions. However, do you have a standardized setup that uses Tailwind CSS v4 and PrimeNG for both the Host and Remote applications?
Thank you very much.