Skip to content

Failed route to a remote app (Module Federation + Angular + React + Rspack) #33992

@mlc-mlapis

Description

@mlc-mlapis

Current Behavior

  1. A fresh new monorepo workspace was created using the command create-nx-workspace mf-rspack-demo (version 22.3.3) with the following options.
Which starter do you want to use? · custom
√ Which stack do you want to use? · angular
√ Integrated monorepo, or standalone project? · integrated
√ Application name · first
√ Which bundler would you like to use? · rspack
√ Default stylesheet format · scss
√ Do you want to enable Server-Side Rendering (SSR)? · No
√ Which unit test runner would you like to use? · vitest-analog
√ Test runner to use for end to end (E2E) tests · playwright
√ Try the full Nx platform? · skip
  1. A module federation remote was created using the command nx g @nx/angular:remote apps/mfa --bundler=rspack with the following options.
√ Which stylesheet format would you like to use? · scss
√ Which unit test runner would you like to use? · vitest-analog
√ Which E2E test runner would you like to use? · playwright
  1. A module federation host was created using the command nx g @nx/angular:host apps/shell --remotes=mfa --bundler=rspack with the same options as for the remote above.

  2. The shell application was served using the command nx serve shell (mapped to rspack serve --port=4200 --node-env=development).

  3. The shell application was opened in a browser using http://localhost:4200.

  4. When trying to route to the mfa application (clicking on the Mfa link), the error
    ERROR SyntaxError: Unexpected token 'export' (at remoteEntry.js:44605:1) while loading "./Routes" from 4916
    appeared on the console, and the routing failed.

PS: It is possible to open the mfa remote application in a separate browser tab directly using http://localhost:4201.

Expected Behavior

It should be possible to route to the mfa remote application from the shell host application.

GitHub Repo

https://github.com/mlc-mlapis/mf-rspack-demo

Steps to Reproduce

  1. Clone the repo.
  2. Run the npm i command.
  3. Run the nx serve shell command.
  4. Open http://localhost:4200 in a browser.
  5. Click on the Mfa link.

Nx Report

Node           : 22.21.0
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 10.9.4

nx (global)            : 22.3.3
nx                     : 22.3.3
@nx/js                 : 22.3.3
@nx/eslint             : 22.3.3
@nx/workspace          : 22.3.3
@nx/angular            : 22.3.3
@nx/devkit             : 22.3.3
@nx/eslint-plugin      : 22.3.3
@nx/module-federation  : 22.3.3
@nx/playwright         : 22.3.3
@nx/rspack             : 22.3.3
@nx/vite               : 22.3.3
@nx/vitest             : 22.3.3
@nx/web                : 22.3.3
@nx/webpack            : 22.3.3
typescript             : 5.9.3
---------------------------------------
Registered Plugins:
@nx/angular/plugin
@nx/eslint/plugin
@nx/vitest
@nx/playwright/plugin
@nx/rspack/plugin
---------------------------------------
Community plugins:
@analogjs/vite-plugin-angular : 2.1.3
@analogjs/vitest-angular      : 2.1.3
angular-eslint                : 21.1.0
---------------------------------------
Cache Usage: 23.54 MB / 186.24 GB

Failure Logs

Package Manager Version

No response

Operating System

  • macOS
  • Linux
  • Windows
  • Other (Please specify)

Additional Information

Image Image

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions