Rspack Module Federation : Enable dts not working as expected.

[yusa-imit]

Current Behavior

I'm following this instruction for making module federation app with rspack.

In my usecase, I need to ship out d.ts file for another projects. So, I did turn on dts option in withModuleFederation with dts: true but dts options are not working as I expected.

While building in Remote App, I see some error messages like
Unable to compile federated types, Error: compile TS failed, the original command is 'npx tsc --project \org\apps\remote1\node_modules\.federation\tsconfig.1ba29e7b6ef5f0960e297f38c58f6b83.json'

In Host App, there's some red lines with typescript like Cannot find module 'remote1/Module' or its corresponding type declarations.ts(2307) but it completes build.

Expected Behavior

As module federation's official documents.

While building (or serving whatever...) Host app should have directories named like @mf-types and collects d.ts files from Remote app. Should offer offer type hint.

GitHub Repo

https://github.com/yusa-imit/nx-mf-dts-regen?tab=readme-ov-file

Steps to Reproduce

1. pnpm install
2. run nx run remote:build for checking errors
3. run nx run-many --target=serve --projects=remote1,shell for checking shell app properly build without errors.

Nx Report

Node : 20.17.0
OS : win32-x64
Native Target : x86_64-windows
npm : 10.8.2

nx : 20.0.3
@nx/js : 20.0.3
@nx/jest : 20.0.3
@nx/eslint : 20.0.3
@nx/workspace : 20.0.3
@nx/devkit : 20.0.3
@nx/eslint-plugin : 20.0.3
@nx/playwright : 20.0.3
@nx/react : 20.0.3
@nx/rspack : 20.0.3
@nx/vite : 20.0.3
@nx/web : 20.0.3
@nx/webpack : 20.0.3
typescript : 5.5.4

Failure Logs

• Executing task: npx nx run-many --target=serve --projects=remote1,shell

NX Running target serve for 2 projects:

• remote1
• shell

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

nx run remote1:serve

nx run shell:serve

NX Starting module federation dev-server for remote1 with 0 remotes
NX Starting module federation dev-server for shell with 1 remotes
NX Building 1 static remotes...
NX Starting static remotes proxies...
NX Static remotes proxies started successfully
NX Built 1 static remotes
NX Starting static remotes proxies...
NX Static remotes proxies started successfully
[ Module Federation Manifest Plugin ]: Manifest will use absolute path resolution via its host at runtime, reason: publicPath='auto'
[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:4201/, http://[::1]:4201/
[webpack-dev-server] 404s will fallback to '/index.html'
[ Module Federation Manifest Plugin ]: Manifest will use absolute path resolution via its host at runtime, reason: publicPath='auto'
[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:4200/, http://[::1]:4200/
[webpack-dev-server] 404s will fallback to '/index.html'
Starting up http-server, serving dist/apps

http-server version: 14.1.1

http-server settings:
CORS: true
Cache: -1 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
http://localhost:4203
Hit CTRL-C to stop the server
Federated types extraction completed
[ Module Federation Manifest Plugin ] Manifest Link: {auto}/mf-manifest.json
NX Server ready at http://localhost:4200
assets by path *.js 1.95 MiB
assets by chunk 1.37 MiB (id hint: vendors)
asset vendors-node_modules_react-dom_index_js.js 1 MiB [emitted] (id hint: vendors)
asset vendors-node_modules_react-router-dom_dist_index_js.js 245 KiB [emitted] (id hint: vendors)
+ 2 assets
asset main.js 487 KiB [emitted] (name: main)
asset src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom.js 113 KiB [emitted]
assets by path *.json 4.68 KiB
asset mf-stats.json 2.53 KiB [emitted]
asset mf-manifest.json 2.15 KiB [emitted]
asset favicon.ico 14.7 KiB [emitted]
asset 3rdpartylicenses.txt 6.69 KiB [emitted]
asset src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom.css 384 bytes [emitted]
asset index.html 347 bytes [emitted]
asset assets.gitkeep 0 bytes [emitted]
runtime modules 44.3 KiB 24 modules
modules by path ../../node_modules/ 1.71 MiB 63 modules
modules by path ./src/ 102 KiB (javascript) 80 bytes (css) 5 modules
provide-module modules 126 bytes
provide shared module (default) react-dom@18.3.1 = F:\codespace\codespace\org\node_modules\react-dom\index.js 42 bytes [built] [code generated]

• 2 modules
  consume-shared-module modules 126 bytes
  consume shared module (default) react@18.3.1 (strict) (strict) (fallback: F:\codespace\codespace\org\node_modules\react\index.js) 42 bytes [built] [code generated]
• 2 modules
  remote-module modules 12 bytes (share-init) 12 bytes (remote)
  remote remote1/Module 6 bytes (share-init) 6 bytes (remote) [built] [code generated]
  remote remote1/button 6 bytes (share-init) 6 bytes (remote) [built] [code generated]
  @module-federation/runtime/rspack.js!=!data:text/javascript,import _module.. 18.7 KiB [built] [code generated]
  external "remote1@http://localhost:4201/remoteEntry.js" 42 bytes [built] [code generated]
  Rspack 1.0.5 compiled successfully in 889 ms
  Unable to compile federated types, Error: compile TS failed, the original command is 'npx tsc --project F:\codespace\codespace\org\apps\remote1\node_modules.federation\tsconfig.1ba29e7b6ef5f0960e297f38c58f6b83.json'
  Error: ENOENT: no such file or directory, open 'F:\codespace\codespace\org\apps\remote1\dist@mf-types.zip'
  at Object.openSync (node:fs:573:18)
  at Object.readFileSync (node:fs:452:35)
  at _GenerateTypesPlugin. (F:\codespace\codespace\org\node_modules@module-federation\dts-plugin\dist\index.js:2525:140)
  at Generator.next ()
  at fulfilled (F:\codespace\codespace\org\node_modules@module-federation\dts-plugin\dist\index.js:66:24)
  at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'F:\codespace\codespace\org\apps\remote1\dist\@mf-types.zip'
  }
  [ Module Federation Manifest Plugin ] Manifest Link: {auto}/mf-manifest.json
  NX Server ready at http://localhost:4201
  assets by path *.js 2.17 MiB
  assets by chunk 1.13 MiB (id hint: vendors)
  asset vendors-node_modules_react-dom_index_js.js 1 MiB [emitted] (id hint: vendors)
  asset vendors-node_modules_react_index_js.js 86.1 KiB [emitted] (id hint: vendors)
  asset vendors-node_modules_react_jsx-dev-runtime_js.js 41.8 KiB [emitted] (id hint: vendors)
• 6 assets
  assets by path *.json 4.82 KiB
  asset mf-stats.json 2.52 KiB [emitted]
  asset mf-manifest.json 2.3 KiB [emitted]
  asset favicon.ico 14.7 KiB [emitted]
  asset 3rdpartylicenses.txt 3.22 KiB [emitted]
  asset index.html 393 bytes [emitted]
  asset src_bootstrap_tsx.css 282 bytes [emitted]
  asset assets.gitkeep 0 bytes [emitted]
  runtime modules 83.5 KiB 45 modules
  javascript modules 1.6 MiB (javascript) 42 bytes (expose)
  modules by path ../../node_modules/ 1.49 MiB 60 modules
  modules by path ./src/ 100 KiB 7 modules
  @module-federation/runtime/rspack.js!=!data:text/javascript,import _module.. 18.5 KiB [built] [code generated]
  container entry 42 bytes (javascript) 42 bytes (expose) [built] [code generated]
  provide-module modules 84 bytes
  provide shared module (default) react-dom@18.3.1 = F:\codespace\codespace\org\node_modules\react-dom\index.js 42 bytes [built] [code generated]
  provide shared module (default) react@18.3.1 = F:\codespace\codespace\org\node_modules\react\index.js 42 bytes [built] [code generated]
  consume-shared-module modules 84 bytes
  consume shared module (default) react@18.3.1 (strict) (strict) (fallback: F:\codespace\codespace\org\node_modules\react\index.js) 42 bytes [built] [code generated]
  consume shared module (default) react-dom@18.3.1 (strict) (strict) (fallback: F:\codespace\codespace\org\node_modules\react-dom\index.js) 42 bytes [built] [code generated]
  ./src/styles.css 80 bytes [built] [code generated]
  Rspack 1.0.5 compiled successfully in 2.27 s

Package Manager Version

9.12.1

Operating System

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

Additional Information

No response

[soumyanildas]

@Coly010 Do we have a timeline for this fix?

[Coly010]

Can this be retried on the latest version of Nx?

[sdasswift]

It works with the latest version and I'm planning to upgrade our code. Thank you

[github-actions]

This issue has been automatically marked as stale because no results of retrying on the latest version of Nx was provided within 7 days.
It will be closed in 21 days if no results are provided.
If the issue is still present, please reply to keep it active.
If the issue was not present, please close this issue.
Thanks for being a part of the Nx community! 🙏

[philwronski]

@yusa-imit have you tried to run the displayed command ?

'npx tsc --project \org\apps\remote1\node_modules.federation\tsconfig.1ba29e7b6ef5f0960e297f38c58f6b83.json'

Il you run this command line, you will see typescript errors that block Nx build. Fix that and your build will be OK.

PS: When you build your app with module federation, it generates a tsconfig file. please be carefull with this file.

[github-actions]

This issue has been automatically marked as stale because no results of retrying on the latest version of Nx was provided within 7 days.
It will be closed in 21 days if no results are provided.
If the issue is still present, please reply to keep it active.
If the issue was not present, please close this issue.
Thanks for being a part of the Nx community! 🙏