Remote microfrontend not working after upgrading to nx version 20.1.0

kindy91 commented 19 hours ago

Current Behavior

After upgrading to nx version 20.1.0 following the steps in https://nx.dev/nx-api/nx/documents/migrate, i faced a bug where a remote frontend is not working. After serving the projects, i get an error saying it can't find the remote project module.

For context, i have an angular microfrontend project with one shell and 2 remote projects. Here is a simplified example of a structure similar to my case.

-- main ( shell )
-- shopping-cart ( remote )
-- payment ( remote )

The error happens for the shopping-cart and not for payment projects. If rename shopping-cart to a single word, it works fine. It seems to be that it has a problem with camel-case.

Expected Behavior

It should work fine without errors after serving the projects.

GitHub Repo

No response

Steps to Reproduce

Have a shell and a remote angular projects in major versions before 20.1.0
Migrate to 20.1.0
serve the shell and remotes

Nx Report

NX   Report complete - copy this into the issue template

Node           : 18.19.0
OS             : linux-x64
Native Target  : x86_64-linux
npm            : 10.2.3

nx                 : 20.1.0
@nx/js             : 20.1.0
@nx/eslint         : 20.1.0
@nx/workspace      : 20.1.0
@nx/angular        : 20.1.0
@nx/devkit         : 20.1.0
@nx/eslint-plugin  : 20.1.0
@nx/web            : 20.1.0
@nx/webpack        : 20.1.0
nx-cloud           : 19.1.0
typescript         : 5.5.4
---------------------------------------
Community plugins:
@ngrx/component-store : 18.1.0
@ngrx/effects         : 18.1.0
@ngrx/entity          : 18.1.0
@ngrx/operators       : 18.1.0
@ngrx/store           : 18.1.0
@ngrx/store-devtools  : 18.1.0

Failure Logs

after running `nx serve main --devRemotes=payment,shopping-cart` i receive the following error.

./apps/main/src/app/app-routing.module.ts:10:22-53 - Error: Module not found: Error: Can't resolve 'shopping-cart/Module' in '../apps/main/src/app'

Package Manager Version

No response

Operating System

[ ] macOS
[ ] Linux
[x] Windows
[ ] Other (Please specify)

Additional Information

It seems to be a problem with camel-case remotes. If you repeated the same steps to reproduce and then renamed it to be of one word, it works fine.

Aubrey-Russell commented 17 hours ago

I also confirm this fails. I would strongly encourage the NX team to please add a federated remote module example to their test process for each new release. Most attempts to upgrade major NX versions are very challenging, and the remote module federation fails in some way, even with run migrations. For example, last time the introduction of dts broke everything and dts had to be disabled in webpack config. Additionally, the SSL logic changed and now you must specify a ssl key and cert for local host development or it fails with a path error. But it doesn't tell you that SSL key and cert is required, it just fails ambiguously even with verbose specified even though it didn't fail in previous NX versions. If you look back through the issue history, there are significant issues like this that occur after every major release from a large diversity of people for remote module federation.

I will build an example repo with remote module federation which the nx team can test against before pushing a release to ensure that the people using remote federated modules have a better upgrade experience. The test process will involve simply upgrading the version using migrations, then launching the application to ensure no errors occur. Or at least warn people that an upgrade will fail and offer the mitigation if it exists

Aubrey-Russell commented 16 hours ago

Also trying to create an example repo with a fresh npx create workspace results in this error:

nrwl / nx