TypeError: NX withModuleFederation is not a function #29557

nhhockeyplayer · 2025-01-08T23:33:18Z

Current Behavior

Just migrated to 20.3.1
followed the docs on this one at
https://nx.dev/recipes/webpack/webpack-config-setup#configure-webpack-for-module-federation
for angular

build should run clean, it wont
most executors do not support a solution to this
the only one I know of is
"executor": "@nx/angular:webpack-browser",

and it fails consistently
it cannot process the plugins withNx() and all the others supporting expanded webpack config within the MFE build ecosystem particularly withModuleFederation

I am still sadly attempting to overcome the
BREAKING CHANGE: webpack < 5
polyfills impact
by implementing a custom webpack.config.ts

for 2 years the web posts are all moving targets to solve and this remains so

Expected Behavior

build should run clean

I am still sadly attempting to overcome the
BREAKING CHANGE: webpack < 5
polyfills impact
by implementing a custom webpack.config.ts

GitHub Repo

https://github.com/nhhockeyplayer/meanstacknh

Steps to Reproduce

I have a microfront end 1 host and 3 remotes everything combed thru and sync'd up

nx run ui-host:build:development

or

nx build ui-host

Nx Report

nx report

 NX   Report complete - copy this into the issue template

Node           : 22.9.0
OS             : darwin-x64
Native Target  : x86_64-macos
yarn           : 1.22.22

nx (global)            : 20.3.1
nx                     : 20.3.1
@nx/js                 : 20.3.1
@nx/jest               : 20.3.1
@nx/eslint             : 20.3.1
@nx/workspace          : 20.3.1
@nx/angular            : 20.3.1
@nx/cypress            : 20.3.1
@nx/devkit             : 20.3.1
@nx/esbuild            : 20.3.1
@nx/eslint-plugin      : 20.3.1
@nx/express            : 20.3.1
@nx/module-federation  : 20.3.1
@nx/nest               : 20.3.1
@nx/node               : 20.3.1
@nx/playwright         : 20.3.1
@nx/vite               : 20.3.1
@nx/web                : 20.3.1
@nx/webpack            : 20.3.1
nx-cloud               : 19.1.0
typescript             : 5.6.3
---------------------------------------
Registered Plugins:
@nx/cypress/plugin
@nx/playwright/plugin
@nx/eslint/plugin
@nx/jest/plugin
---------------------------------------
Community plugins:
@compodoc/compodoc               : 1.1.26
@fortawesome/angular-fontawesome : 1.0.0
@ionic/angular                   : 6.7.5
@jsverse/transloco               : 7.5.1
@ngrx/component                  : 19.0.0
@ngrx/component-store            : 19.0.0
@ngrx/effects                    : 19.0.0
@ngrx/entity                     : 19.0.0
@ngrx/operators                  : 19.0.0
@ngrx/router-store               : 19.0.0
@ngrx/schematics                 : 18.0.2
@ngrx/store                      : 19.0.0
@ngrx/store-devtools             : 18.0.2
@nxext/capacitor                 : 20.1.0
@nxext/ionic-angular             : 20.0.5
apollo-angular                   : 8.0.0

Failure Logs

> nx run ui-host:build:production

One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. For more information, see https://angular.dev/tools/cli/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.

 NX   withModuleFederation is not a function

TypeError: withModuleFederation is not a function
    at module.exports (/Users/meanstack02/meanstacknh/apps/ui-host/webpack.config.ts:5:40)
    at mergeCustomWebpackConfig (/Users/meanstack02/meanstacknh/node_modules/@nx/angular/src/builders/utilities/webpack.js:23:27)
    at initialize (/Users/meanstack02/meanstacknh/node_modules/@angular-devkit/build-angular/src/builders/browser/index.js:71:29)
    at /Users/meanstack02/meanstacknh/node_modules/@angular-devkit/build-angular/src/builders/browser/index.js:95:32


——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Running target build for project ui-host and 20 tasks it depends on failed

Failed tasks:

- ui-host:build:production

Package Manager Version

npm --version 10.9.0. yarn --version 1.22.22

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

this is the current state of my only webpack.config.ts

I never cared to memorize each and every property of webpack and how they all fall into place
but this setup is not cutting it

const withModuleFederation = require('@nx/angular/module-federation')
const moduleFederationConfig = require('./module-federation.config')

module.exports = async (config, context) => {
    const fromModuleFederation = await withModuleFederation({
        ...moduleFederationConfig
    })

    config = fromModuleFederation(config, context)
    config = {
        ...config, ...{
            dts: false,

            resolve: {
                fallbacks: {
                    'zone': false,
                    'zlib': false,
                    'timers': false,
                    'buffer': false,
                    'path': false,
                    'fs': false,
                    'crypto': require.resolve('crypto-browserify'),
                    'stream': require.resolve('stream-browserify'),
                    'assert': require.resolve('assert'),
                    'http': require.resolve('stream-http'),
                    'https': require.resolve('https-browserify'),
                    'os': require.resolve('os-browserify'),
                    'url': require.resolve('url')
                }
            }

        }
    }

    return config
}

I did generate a new scaffold workspace
to see what the new generated files look like and I did spot an anomoly of bridging the remotes
the host beneath apps/host-security/public/module-federation.manifest.json contained the following

{
  "remoteEmployee": "http://localhost:4201/mf-manifest.json"
}

no such mf-manifest.json exists is this hidden within some plugin?

I set mine up in my project to contain this

{
    "ui-auth": "http://localhost:4201/module-federation.manifest.json",
    "ui-nav": "http://localhost:4202/module-federation.manifest.json",
    "ui-dashboard": "http://localhost:4203/module-federation.manifest.json"
}

this is something I saw along the way but Im still shaking this out as well as reviewing my httploaders

anyway I would like to know why TypeError: withModuleFederation is not a function

thank you for an elite awesome product

The text was updated successfully, but these errors were encountered:

nhhockeyplayer · 2025-01-09T03:43:11Z

so it doesn't seem to like this line for this issue on my version of webpack.config.ts

module.exports = async (config, context) => {
const fromModuleFederation = await withModuleFederation({
...moduleFederationConfig
})

When I copy the code right from the documentation
https://nx.dev/recipes/webpack/webpack-config-setup#configure-webpack-for-module-federation

it looks like this for angular as-is I added nothing to it

const { composePlugins, withNx } = require('@nx/webpack');
const { merge } = require('webpack-merge');
const withModuleFederation = require('@nx/angular/module-federation');

module.exports = composePlugins(
    withNx(),
    async (config, { options, context }) => {
        const federatedModules = await withModuleFederation({
            // your options here
        });

        return merge(federatedModules(config, { options, context }), {
            // overwrite values here
        });
    }
);

but nx build ui-host yeilds this

> nx run ui-host:build:production

One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. For more information, see https://angular.dev/tools/cli/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.

 NX   Cannot read properties of undefined (reading 'target')

TypeError: Cannot read properties of undefined (reading 'target')
    at configure (/Users/meanstack02/meanstacknh/node_modules/@nx/webpack/src/utils/with-nx.js:18:29)
    at combined (/Users/meanstack02/meanstacknh/node_modules/@nx/webpack/src/utils/config.js:26:28)
    at mergeCustomWebpackConfig (/Users/meanstack02/meanstacknh/node_modules/@nx/angular/src/builders/utilities/webpack.js:23:21)
    at initialize (/Users/meanstack02/meanstacknh/node_modules/@angular-devkit/build-angular/src/builders/browser/index.js:71:29)
    at /Users/meanstack02/meanstacknh/node_modules/@angular-devkit/build-angular/src/builders/browser/index.js:95:32


——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

 NX   Running target build for project ui-host and 20 tasks it depends on failed

Failed tasks:

- ui-host:build:production

still trying to shake this out reviewing my project.json files

if anyone can reproduce this and help I would greatly appreciate

Thank you

nhhockeyplayer · 2025-01-09T03:53:37Z

can someone explain the back and forth about these statements?

const withModuleFederation = require('@nx/module-federation/angular'); // Or @nx/angular/module-federation
const oldwithModuleFederation = require('@nx/angular/module-federation');

why does this have be a constant moving target

both fail for me

========
another issue I found on one of my remotes

webpack.config for apps/ui-auth/webpack.config.ts

import { withModuleFederation } from '@nx/module-federation/angular';
import config from './module-federation.config';

/**
 * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
 * The DTS Plugin can be enabled by setting dts: true
 * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
 */
export default withModuleFederation(config, {
    dts: false,
});

this line here import config from './module-federation.config'; gives error
TS2306: File
/Users/meanstack02/meanstacknh/apps/ui-auth/module-federation.config.ts
is not a module.

which looks like this

module.exports = {
    name: 'ui-auth',
    exposes: {
        './Routes': 'apps/ui-auth/src/app/remote-entry/entry.routes.ts',
    },

    additionalShared: [
        '@angular/animations',
        '@angular/cdk',
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/forms',
        '@angular/router',
        {
            libraryName: '@apollo/client',
            sharedConfig: {
                singleton: true,
                strictVersion: false,
                requiredVersion: '3.11.10'
            }
        },
        '@jsverse/transloco',
        '@ngrx/effects',
        '@ngrx/store',
        'apollo-angular',
        'graphql',
        {
            libraryName: 'luxon',
            sharedConfig: {
                singleton: true,
                requiredVersion: '3.5.0',
                strictVersion: true
            }
        },
    ]
};

whoever is writing all this code can I get some feedback? and some help?

I have done MFE's commercially and this shouldn't be happening

a tsconfig property?

Please
thanks

nhhockeyplayer · 2025-01-09T04:15:30Z

does not seem to be a tsconfig issue I copied over properties from a newly generated similar mfe scaffold

    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",

but the bare bones code copied right from the docs doesn't hold water

it yields

> nx run ui-host:build:production

One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
⠋ Generating browser application bundles (phase: setup)...    TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browserslist configuration. For more information, see https://angular.dev/tools/cli/build#configuring-browser-compatibility
    NOTE: You can set the "target" to "ES2022" in the project's tsconfig to remove this warning.

 NX   Cannot read properties of undefined (reading 'target')

TypeError: Cannot read properties of undefined (reading 'target')
    at configure (/Users/meanstack02/meanstacknh/node_modules/@nx/webpack/src/utils/with-nx.js:18:29)
    at combined (/Users/meanstack02/meanstacknh/node_modules/@nx/webpack/src/utils/config.js:26:28)
    at mergeCustomWebpackConfig (/Users/meanstack02/meanstacknh/node_modules/@nx/angular/src/builders/utilities/webpack.js:23:21)
    at initialize (/Users/meanstack02/meanstacknh/node_modules/@angular-devkit/build-angular/src/builders/browser/index.js:71:29)
    at /Users/meanstack02/meanstacknh/node_modules/@angular-devkit/build-angular/src/builders/browser/index.js:95:32

I have yet to see a demo or example of custom webpack with Nx mfe solving the
BREAKING CHANGE: webpack < 5
polyfills impact

thanks for an elite awesome product

your help is greatly appreciated

nhhockeyplayer · 2025-01-09T04:32:55Z

so now I switch my executor to @nx/webpack:webpack
and the schema forces me to eliminate "polyfills": ["zone.js"], and assets:[] properties
(how are we suppose to configure assets? I dont want to be pulled deeper into webpack)

yeilds error below with "isolatedConfig": false, in my project.json but I have a webpack.config.ts

NX   Using "isolatedConfig" without a "webpackConfig" is not supported.

Error: Using "isolatedConfig" without a "webpackConfig" is not supported.
   at getWebpackConfigs (/Users/meanstack02/meanstacknh/node_modules/@nx/webpack/src/executors/webpack/webpack.impl.js:19:15)
   at webpackExecutor (/Users/meanstack02/meanstacknh/node_modules/@nx/webpack/src/executors/webpack/webpack.impl.js:98:27)
   at webpackExecutor.next (<anonymous>)
   at getLastValueFromAsyncIterableIterator (/Users/meanstack02/meanstacknh/node_modules/nx/src/utils/async-iterator.js:15:34)
   at iteratorToProcessStatusCode (/Users/meanstack02/meanstacknh/node_modules/nx/src/command-line/run/run.js:39:90)
   at /Users/meanstack02/meanstacknh/node_modules/nx/src/command-line/run/run.js:176:16
   at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
   at async handleErrors (/Users/meanstack02/meanstacknh/node_modules/nx/src/utils/handle-errors.js:8:24)
   at async process.<anonymous> (/Users/meanstack02/meanstacknh/node_modules/nx/bin/run-executor.js:59:28)

so I add isolatedConfig: false

and the build brings me back full circle again using my webpack.config.ts

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'

if nx team could take the time to throw together an mfe/webpack/polyfill demo that demonstrates that the webpack < 5 issue is put to rest I think its warranted given all the examples out there this one has been biting for quite a while everywhere on the web. I find it terrible that somehow I have to retrofit my nx project options into webpack config now (ie. assets and more)

nhhockeyplayer · 2025-01-09T04:49:25Z

so I finally realize theres a webpack plugin on the docs
not in my nx.json

was there on previous iterations

so I put it back

and that brings me back to this issue being created in 1st place

Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it.
An error occurred while processing files for the @nx/webpack/plugin plugin.
- apps/admin/webpack.config.ts: withModuleFederation is not a function
TypeError: withModuleFederation is not a function

no clue why executor is running off to build my admin app (that speaks) its neither host nor remote but there was a transient webpack.config.ts there I just deleted. no reason for that to even happen. I manually built ui-host.

going in circles here with nx and webpack

if anyone can prioritize this that would be terrific

nhhockeyplayer · 2025-01-09T04:53:31Z

as I recall this could have been influenced by rogue imports with long relative ../../.. that snuck in somehow

major code review in progress but overall Im very uncomfortable with this

nhhockeyplayer · 2025-01-09T05:18:09Z

One last question
why is this so react biased
angular developers are getting the shaft here
angular is being shafted

why cant they implement it so we can use normal typescript imports

who is imposing REQUIRE on front end apps?

and this is whats triggering the webpack < 5 wreck?

something isn't right here. Its wrong.

Victors high velocity masterpiece has been sent into the trench and he should be aware of that.

Im taking a break on this waiting for feedback

and I am going to hold my breathe

nhhockeyplayer added the type: bug label Jan 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: NX withModuleFederation is not a function #29557

TypeError: NX withModuleFederation is not a function #29557

nhhockeyplayer commented Jan 8, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025

TypeError: NX withModuleFederation is not a function #29557

TypeError: NX withModuleFederation is not a function #29557

Comments

nhhockeyplayer commented Jan 8, 2025 • edited Loading

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

I have a microfront end 1 host and 3 remotes everything combed thru and sync'd up

Nx Report

Failure Logs

Package Manager Version

Operating System

Additional Information

nhhockeyplayer commented Jan 9, 2025

nhhockeyplayer commented Jan 9, 2025 • edited Loading

nhhockeyplayer commented Jan 9, 2025 • edited Loading

nhhockeyplayer commented Jan 9, 2025 • edited Loading

nhhockeyplayer commented Jan 9, 2025 • edited Loading

nhhockeyplayer commented Jan 9, 2025 • edited Loading

nhhockeyplayer commented Jan 9, 2025

nhhockeyplayer commented Jan 8, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading

nhhockeyplayer commented Jan 9, 2025 •

edited

Loading