Unable to use esbuild plugins in native-federation

[thefirst24]

With what library do you have an issue?

native-federation

Reproduction of the bug/regression with instructions

1. Set "@angular-architects/native-federation:build" executor for serve target with target option "project:serve-original:development"
2. Set "@angular-devkit/build-angular:dev-server" executor for "serve-original" target with build target "project:esbuild:development"
3. Set "@angular-builders/custom-esbuild:application" or "@nx/angular:application" executor for "esbuild" target
4. Add plugins to options for esbuild target
5. Run "nx serve project" command
6. Get error "Data path "" must NOT have additional properties(plugins)."

Full error:
Error: Schema validation failed with the following errors:
Data path "" must NOT have additional properties(plugins).
at name (node_modules@angular-devkit\architect\src\architect.js:228:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I logged builderName variable in _validateOptionsFactory in architect.js line and it print out "@angular-devkit/build-angular:application" for some reason

Expected behavior

Successfully build the application with esbuild plugins.

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

"dependencies": {
"@angular/animations": "18.2.0",
"@angular/common": "18.2.0",
"@angular/compiler": "18.2.0",
"@angular/core": "18.2.0",
"@angular/forms": "18.2.0",
"@angular/platform-browser": "18.2.0",
"@angular/platform-browser-dynamic": "18.2.0",
"@angular/router": "18.2.0",
},
"devDependencies": {
"@angular-architects/module-federation": "^18.0.6",
"@angular-architects/native-federation": "^18.2.2",
"@angular-builders/custom-esbuild": "^18.0.0",
"@angular-devkit/build-angular": "^18.2.0",
"@angular-devkit/core": "18.2.0",
"@angular-devkit/schematics": "18.2.0",
"@angular/build": "^18.2.8",
"@angular/cdk": "18.2.0",
"@angular/cli": "~18.2.0",
"@angular/compiler-cli": "18.2.0",
"@nx/angular": "19.6.1",
"@nx/devkit": "19.6.1",
"@nx/jest": "19.6.1",
"@nx/js": "19.6.1",
"@nx/playwright": "19.6.1",
"@nx/plugin": "19.6.1",
"@nx/web": "19.6.1",
"@nx/webpack": "19.6.1",
"@nx/workspace": "19.6.1",
"nx": "19.6.1",
"typescript": "5.5.4",
}

Other information

No response

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

• Yes
• No

[rainerhahnekamp]

@thefirst24 please provide a reproducible stackblitz example as provided in the template you used to create this issue.

[cgbrucezjy]

Hi @rainerhahnekamp , I'm encountering similar issue here. i think just a your example app should be proving it.
judging form the source code here

module-federation-plugin/libs/native-federation/src/builders/build/builder.ts

Lines 161 to 173 in 434a94e

	const plugins = [
	createSharedMappingsPlugin(config.sharedMappings),
	{
	name: 'externals',
	setup(build: PluginBuild) {
	if (nfOptions.ssr || build.initialOptions.platform !== 'node') {
	build.initialOptions.external = externals.filter(
	(e) => e !== 'tslib'
	);
	}
	},
	},
	];

it looks like plugins are hard coded to buildApplication

I could be wrong here, but I would really need a way to provide some plugins, any help or pointers would be great, thanks in advance

[YeomansIII]

Also having this issue. Need esbuild plugins for monaco-editor and some other custom ones that are applied. native-federation either overrides the plugins at build time preventing my plugins from running, or during serve throws a schema validation error.

 NX   Schema validation failed with the following errors:

  Data path "" must NOT have additional properties(plugins).
Error: Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(plugins).
    at name (/Users/jason/dev/spacequest/nisra/node_modules/@angular-devkit/architect/src/architect.js:227:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

I am using the @angular-builders/custom-esbuild:application executor to apply esbuild plugins.

[rainerhahnekamp]

Guys, can someone please reproduce this in our stackblitz template which we are already providing?

[YeomansIII]

Yes, will do that soon

[YeomansIII]

@rainerhahnekamp Here is the minimal stackblitz.
https://stackblitz.com/edit/github-cuazxc?file=angular.json

I changed the esbuild and serve-original builders to @angular-builders/custom-esbuild and added a do-nothing esbuild plugin that should log to the console when it is run.

You can see that trying to ng serve the host or remote apps results in the schema validation error.
When trying ng build the host or remote apps, the build is successful, but the plugin is never run (no log output).

Running ng run host:esbuild or ng run host:serve-original is both successful AND the plugin log is outputted (meaning the plugin ran). However, obviously, the native-federation assets are not included in the serve or the bundled outputs.

I've been trying to tackle this for a few days so I'm somewhat familiar with what might be happening behind the scenes, so feel free to let me know if you have any further questions.

The reason I am running into this issue is that I am trying to migrate a project from webpack/module-federation to esbuild/native-federation. I was using some webpack plugins during that process (specifically, monaco-editor-webpack-plugin). I have the plugins working in esbuild, but they aren't working with native-federation for the reasons stated above.

[rainerhahnekamp]

Hey Jason, thanks for that detailed information. It is now up to us to fix it. I've assigned the issue me.

[YeomansIII]

I know you probably have a lot on your plate. Could you please update us after investigating when you have an expected date when this might be fixed/available? The reason I was so quickly moving to native-federation is that some other package update broke module-federation on my project. Instead of digging too much into that, I decided to simply use the effort on the migration to native-federation. So things are fairly broken at the moment.

In the meantime, I am going to fork and investigate a fix myself just to try to keep moving. Thanks again.

[rainerhahnekamp]

@YeomansIII, yes this time of the year is always crazy. Giving my current tasks, it is going to be the end of December

[YeomansIII]

Are you accepting PRs?

[rainerhahnekamp]

Yes, it is still required that one of us reviews it, but it will definitely speed up the whole thing

[YeomansIII]

Was trying my best getting the plugins to work within the architecture of this library, but ended up creating a custom builder that reuses some aspects from this lib to keep the native-federation functionality and allow esbuild plugins.

However, it would still be great if there was a built-in solution within this repo to use esbuild plugins.