[Bug]: The requested module 'rxjs' does not provide an export named 'BehaviorSubject'

[roldan931]

hello everyone, have a nice day.

Version

@softarc/native-federation-orchestrator: ^4.6.1
@angular-architects/native-federation: ^22.1.2
@angular/*: ^22.1.6
@angular/ssr: ^22.1.8

What happened?

When using initNodeFederation from @softarc/native-federation-orchestrator/node
with hostInstances: { include: [...] } set to include rxjs, the internal
resolveHostInstances function crashes while trying to bridge the package,
because it performs a bare dynamic import('rxjs') that gets intercepted by
the already-registered federation module loader, which forces ESM parsing on
a file that is actually CommonJS.

• internal
  ​ ReferenceError: exports is not defined in ES module scope at file:///.../node_modules/rxjs/dist/cjs/index.js:12:23 at ModuleJob.run (node:internal/modules/esm/module_job:439:25) at async node:internal/modules/esm/loader:643:26 at async resolveHostInstances (file:///.../node_modules/@softarc/native-federation-orchestrator/fesm2022/node.mjs:4403:24) at async file:///.../node_modules/@softarc/native-federation-orchestrator/fesm2022/node.mjs:4455:23 ​

• console
  ​ file:///E:/Proyectos/my-web/node_modules/@angular/core/fesm2022/_pending_tasks-chunk.mjs:11 import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs'; ^^^^^^^^^^^^^^^ SyntaxError: The requested module 'rxjs' does not provide an export named 'BehaviorSubject' at #asyncInstantiate (node:internal/modules/esm/module_job:327:21) at async ModuleJob.run (node:internal/modules/esm/module_job:431:5) at async node:internal/modules/esm/loader:643:26 at async file:///E:/Proyectos/my-web/server.entry.mjs... ​

Steps to reproduce

1. Project Angular Base v22 with SSR + @angular-architects/native-federation
2. Create the server.entry.mjs file in the root.

// server.entry.mjs
import { initNodeFederation } from '@softarc/native-federation-orchestrator/node';
import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';

const BROWSER = resolve(process.cwd(), 'dist/my-web/browser');

await initNodeFederation(
    pathToFileURL(resolve(BROWSER, 'federation.manifest.json')).href,
    {
        hostRemoteEntry: pathToFileURL(resolve(BROWSER, 'remoteEntry.json')).href,
        logLevel: 'warn',
    }
);

await import('./dist/my-web/server/server.mjs');

3. Create federation.config.ts

import { withNativeFederation, fromPackageJson, autoShareScope, mappingsFromWorkspace } from '@angular-architects/native-federation/config';

export default withNativeFederation({
  name: '@my-web/host',
  shareScope: autoShareScope({ level: "major" }),
  shared: fromPackageJson({
    singleton: true,
    strictVersion: true,
    requiredVersion: "auto",
    build: 'package'
  })
    .skip([
      'rxjs/ajax',
      'rxjs/fetch',
      'rxjs/testing',
      'rxjs/webSocket',
    ])
    .override({
      '@angular/core': {
        singleton: true,
        strictVersion: true,
        requiredVersion: 'auto',
        build: 'package',
        includeSecondaries: { keepAll: true },
      }
    })
    .get(),
  features: {
    // ignoreUnusedDeps is enabled by default now
    ignoreUnusedDeps: true,

    // Opt-in: groups chunks in remoteEntry.json for smaller metadata file
    denseChunking: true,
    denseExternals: true,
  },
});

4. Execute command node server.entry.mjs before of ng build

Any idea how to fix this bug? I appreciate your answers.

[roldan931]

Issue Update / Resolution

I managed to resolve the issue. The problem was originating in the federation.config.mjs file—specifically around how fromPackageJson handles module resolution and skipping.

Working Configuration

Using shareAll along with the root-level skip option works as expected:

import { 
  withNativeFederation, 
  shareAll, 
  mappingsFromWorkspace, 
  autoShareScope, 
  fromPackageJson 
} from '@angular-architects/native-federation/config';

export default withNativeFederation({
  name: '@4cp-web/host',
  shared: {
    ...shareAll({
      singleton: true,
      strictVersion: true,
      requiredVersion: 'auto',
    }),
  },
  skip: [
    'rxjs/ajax', 
    'rxjs/fetch', 
    'rxjs/testing', 
    'rxjs/webSocket', 
    '@package/web-common'
  ],

  features: {
    ignoreUnusedDeps: true,
    denseExternals: true
  },
});

---

Non-Working Configuration (fromPackageJson and shareScope: autoShareScope())

Using fromPackageJson and shareScope: autoShareScope() with the fluid .skip() API consistently produces the error:

// This block triggers the error during execution
shareScope: autoShareScope({ level: "major" }),
shared: fromPackageJson({
  singleton: true,
  strictVersion: true,
  requiredVersion: "auto",
  build: 'package'
})
  .skip([
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    '@package/web-common'
  ])
  .get()

Additional Finding

Additionally, .skip() chained onto fromPackageJson does not seem to respect packages like @package/web-common (internal/monorepo packages), requiring them to be defined directly in the root-level skip: [...] array instead.

// This block triggers the error during execution
shared: fromPackageJson({
  singleton: true,
  strictVersion: true,
  requiredVersion: "auto",
  build: 'package'
})
  .skip([
    'rxjs/ajax',
    'rxjs/fetch',
    'rxjs/testing',
    'rxjs/webSocket',
    '@package/web-common'
  ])
  .get(),
 
skip: [
    'rxjs/ajax', 
    'rxjs/fetch', 
    'rxjs/testing', 
    'rxjs/webSocket', 
    '@package/web-common'
  ],

Best regards!

[Aukevanoost]

Interesting! Thanks for this.

Is this BehaviorSubject imported in the shared @package/web-common? or in the app.

Iknow that this is frustrating, but this is actually a logical error, since your internal is not considered an shared external, but rather a "sharedMapping" (internally shared library). You can read more about them here: https://native-federation.com/docs/v4/core/configuration/#sharedmappings

[Aukevanoost]

I have another question, based on your setup. Why would you share dependencies on SSR + native-federation?

This is genuine curiosity. because you have all the packages on your node server, so you're technically not benefitting from importing a JS file from a different location. I'd say, keep the shared: {} an empty object on SSR projects. What do you think?

native-federation starts to really shine on CSR apps because there you need to download the source code from different locations, so it matters that you download as little JS as possible.

AFAIK you don't have this problem on SSR setups.