@20.3.0 MFE custom webpack relative path to main.ts incoherent #29507

nhhockeyplayer · 2025-01-03T07:55:23Z

Current Behavior

SUBJECT: @20.3.0 MFE custom webpack relative path to main incoherent

I have a nifty MFE scaffold that does alot from graphql to nest to mongoose/typegoose and alot of good Nx stuff.
My code is so patterned by models it doesnt even need polyfills or any javascript its plug and play of models patterned by decorators that process my models (instances/collections) in/out of my mongoose back end... my nx scaffold code does not deviate to warrant any polyfill usage but I got wiped out by them anyway.

But being in the MFE arena means webpack which means polyfills which means webpack 5 polyfill flank

I customized my webpack.config.ts for a nestjs back end called admin-api

but the mix gets thick rooting out the polyfill dilemma and Im unable to even compile my main.ts due to incoherent RELATIVE PATH

this presents a break in RELATIVE PATH beyond tsonfig.base.json paths and normal imports

webpack just dont want to do relative paths and there is not enough eFrastructure to make this succeed (ie. entry)

Expected Behavior

code should compile clean and build

GitHub Repo

https://github.com/nhhockeyplayer

Steps to Reproduce

create an integrated angular workspace
create host
create remote
create a few libs
create nest app
add path for nest app in tsconfig.base.json
customize webpack.config as shown below to rid the plague of webpack 5 polyfill dilemma
build for development

thanks in advance for your kindness

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.0
nx                     : 20.3.0
@nx/js                 : 20.3.0
@nx/jest               : 20.3.0
@nx/eslint             : 20.3.0
@nx/workspace          : 20.3.0
@nx/angular            : 20.3.0
@nx/cypress            : 20.3.0
@nx/devkit             : 20.3.0
@nx/esbuild            : 20.3.0
@nx/eslint-plugin      : 20.3.0
@nx/express            : 20.3.0
@nx/module-federation  : 20.3.0
@nx/nest               : 20.3.0
@nx/node               : 20.3.0
@nx/playwright         : 20.3.0
@nx/vite               : 20.3.0
@nx/web                : 20.3.0
@nx/webpack            : 20.3.0
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

Build at: 2025-01-03T06:49:55.696Z - Time: 2027ms


> nx run admin-api:build 

RunStart duration: 125
                      (node:6247) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
Entrypoint main =

ERROR in main
Module not found: Error: Can't resolve '@nhhockeyplayer/admin-api/apps/admin-api/src/main.ts' in '/Users/meanstack02/main/meanstacknh'
resolve '@nhhockeyplayer/admin-api/apps/admin-api/src/main.ts' in '/Users/meanstack02/main/meanstacknh'
  Parsed request is a module
  using description file: /Users/meanstack02/main/meanstacknh/package.json (relative path: .)
    resolve as module
      looking for modules in /Users/meanstack02/main/meanstacknh/node_modules
        /Users/meanstack02/main/meanstacknh/node_modules/@nhhockeyplayer/admin-api doesn't exist
      /Users/meanstack02/main/node_modules doesn't exist or is not a directory
      /Users/meanstack02/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

webpack 5.97.1 compiled with 1 error in 77 ms

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

 NX   Running target build for project admin-api and 2 tasks it depends on failed

Failed tasks:

- admin-api:build

Package Manager Version

npm --version 10.9.0 yarn --version 1.22.22

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

here is my run command

> nx run admin-api:build

RunStart duration: 131

 NX   withModuleFederation is not a function

TypeError: withModuleFederation is not a function

I omitted withModuleFederation in my webpack.config.ts just to side step that and get to the polyfill issues first

the issues I am encountering are too numerous to start any one issue

but I ran into a relative path issue now

nx cannot maintain coherent pathing with main.ts and the nest project I generated using nx-console

here is my latest run command
and error showing the relative path issue

> nx run admin-api:build --stats-error-details

RunStart duration: 125
                      (node:6247) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
Entrypoint main =

ERROR in main
Module not found: Error: Can't resolve '@nhhockeyplayer/admin-api/apps/admin-api/src/main.ts' in '/Users/meanstack02/main/meanstacknh'
resolve '@nhhockeyplayer/admin-api/apps/admin-api/src/main.ts' in '/Users/meanstack02/main/meanstacknh'
  Parsed request is a module

my tsconfig.base.json has appropriately setup a path for this but its not cutting it for NX.

        "paths": {
            "@nhhockeyplayer/admin-api/*": ["apps/admin-api/src/*"],

and here is my webpack.config.ts omitting what should be withModuleFederation for now to nail the polyfill issues 1st.
It would be nice if a substantive example existed for angular but nothing at all on web

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: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }

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

module.exports = composePlugins(
    withNx(),
    async (config, { options, context }) => {

        return merge({}, {
                entry: '@nhhockeyplayer/admin-api/apps/admin-api/src/main.ts',
                mode: 'development',
                resolve: {
                    fallback: {
                        'class-transformer/storage': false,
                        'perf_hooks': false,
                        'zone': false,
                        'zlib': false,
                        'timers': false,
                        'buffer': false,
                        'path': false,
                        'fs': false,
                        'crypto': false,
                        'stream': false,
                        'assert': false,
                        'http': false,
                        'https': false,
                        'os': false,
                        'url': false,
                        'redis': false,
                        'nats': false,
                        'amqplib': false,
                        'amqp-connection-manager': false,
                        'net': false,
                        'kafkajs': false,
                        '@grpc/grpc-js': false,
                        '@grpc/proto-loader': false,
                        'zlib_bindings': false,
                        'child_process': false,
                        'repl': false,
                        'dns': false,
                        'tty': false,
                        'dgram': false,
                        'mqtt': false,
                        'async_hooks': false

                    }
                }

            }
        );
    }
);

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

nhhockeyplayer · 2025-01-03T19:40:59Z

I attached my root tsconfig.base and package.json

this line in my webpack.config.ts permits webpack to coherently navigate path

entry: './apps/admin-api/src/main.ts',

6 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./apps/admin-api/src/main.ts 4:0-83
Module not found: Error: Can't resolve './app/common/interceptors/request.interceptor' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 5:0-52
Module not found: Error: Can't resolve './app/auth/auth.module' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 6:0-83
Module not found: Error: Can't resolve './app/domain-model/permission/permission.module' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 7:0-65
Module not found: Error: Can't resolve './app/domain-model/role/role.module' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 8:0-65
Module not found: Error: Can't resolve './app/domain-model/user/user.module' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 9:0-97
Module not found: Error: Can't resolve './app/domain-model/role-permission/role-permission.module' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 10:0-57
Module not found: Error: Can't resolve './environments/environment' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 11:0-58
Module not found: Error: Can't resolve './orm/db-connect-string' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./apps/admin-api/src/main.ts 12:0-45
Module not found: Error: Can't resolve './app/app.module' in '/Users/meanstack02/main/meanstacknh/apps/admin-api/src'

ERROR in ./node_modules/zlib/lib/zlib.js 1:0-43
Module not found: Error: Can't resolve './zlib_bindings' in '/Users/meanstack02/main/meanstacknh/node_modules/zlib/lib'
 @ ./node_modules/socket.io/dist/index.js 32:15-30
 @ ./node_modules/@nestjs/platform-socket.io/adapters/io-adapter.js 9:20-40
 @ ./node_modules/@nestjs/platform-socket.io/adapters/index.js 4:21-44
 @ ./node_modules/@nestjs/platform-socket.io/index.js 10:21-42
 @ ./node_modules/@nestjs/websockets/socket-module.js 69:112-149
 @ ./node_modules/@nestjs/core/nest-application.js 19:107-150
 @ ./node_modules/@nestjs/core/index.js 26:21-50
 @ ./apps/admin-api/src/main.ts 1:0-43 17:22-40

10 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.96.1 compiled with 10 errors and 6 warnings in 2864 ms

I have eliminated all circular dependency risks
all this leads me to new question
my nestjs app ADMIN-API is a node.js server
why am I being forced to provide polyfills for these modules in the first place
arent they needed and should work built in?
this makes no sense
its a node.js (nestjs) app
but something is forcing the webpack polyfill issue onto my projecttsconfig.base.json
package.json

nhhockeyplayer added the type: bug label Jan 3, 2025

nhhockeyplayer changed the title ~~@20.3.0 MFE custom webpack relative path to main broken incoherent~~ @20.3.0 MFE custom webpack relative path to main.ts incoherent Jan 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

@20.3.0 MFE custom webpack relative path to main.ts incoherent #29507

@20.3.0 MFE custom webpack relative path to main.ts incoherent #29507

nhhockeyplayer commented Jan 3, 2025 •

edited

Loading

nhhockeyplayer commented Jan 3, 2025 •

edited

Loading

@20.3.0 MFE custom webpack relative path to main.ts incoherent #29507

@20.3.0 MFE custom webpack relative path to main.ts incoherent #29507

Comments

nhhockeyplayer commented Jan 3, 2025 • edited Loading

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Package Manager Version

Operating System

Additional Information

nhhockeyplayer commented Jan 3, 2025 • edited Loading

nhhockeyplayer commented Jan 3, 2025 •

edited

Loading

nhhockeyplayer commented Jan 3, 2025 •

edited

Loading