module-federation / core

Module Federation is a concept that allows developers to share code and resources across multiple JavaScript applications
https://module-federation.io/
MIT License
1.5k stars 230 forks source link

Modernjs: doesn't work when using the latest version 0.6.1 #2933

Closed GiancarlosIO closed 1 month ago

GiancarlosIO commented 1 month ago

Describe the bug

Hi there! We are exploring modern.js to migrate to it from nextjs. After testing the module-federation implementation, following the modernjs-ssr example, we found 3 errors:

1. Uncaught Error: The loadShareSync function was unable to load react. The react could not be found in frontend_admin_panel.

It happens when we do not set shared.[my-lib].eager to true: image

Its the error: image

I have checked the example file and it doesn't have this config enabled so maybe its a bug in the latest version?

image

This error happens in the host and provider at the same time.

2. Uncaught TypeError: Cannot read properties of undefined (reading 'call')

This happens in the host when trying to isolate the error in a new repo we found this. Kinda weird because it only happens in the repro repository.

image

3. Duplicated library (react/react-dom) even when the shared.[my-lib] is configured

I cant reproduce it in the repo but it happened in our internal testing with real projects when trying to connect two repos, 1 with modernjs (host) and 1 using rebuild (provider). We saw in the devtools that the lib_react chunk was loaded two times where the last one is loaded only when the remote module is loaded.

So, maybe we can't use federation with cross tooling? its recommended to always use the same framework or builder in the host and providers?

Let me know if the issue needs more info.

Thanks!!!!!!!!

Reproduction

https://github.com/GiancarlosIO/module-federation-error

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 Intel(R) Core(TM) i9-14900K
    Memory: 14.02 GB / 31.75 GB
  Binaries:
    Node: 20.17.0 - ~\AppData\Local\fnm_multishells\14756_1725781672693\node.EXE      
    npm: 10.8.2 - ~\AppData\Local\fnm_multishells\14756_1725781672693\npm.CMD
    pnpm: 9.8.0 - ~\AppData\Local\fnm_multishells\14756_1725781672693\pnpm.CMD        
  Browsers:
    Edge: Chromium (128.0.2739.42)
    Internet Explorer: 11.0.22621.3527

Validations

ScriptedAlchemy commented 1 month ago

Thanks I'll have a look

ScriptedAlchemy commented 1 month ago

This appears to use rspack based build, so my changes from 0.6.1 should not have impacted how rspack works since these are other plugins. The problem is async boundary is not being applied automatically. @2heal1 do you know what might casue that to fail in rspack?

2heal1 commented 1 month ago

Ahh let me check

2heal1 commented 1 month ago

For question 1 and question 2 , rspack bundler needs to add source:{ enableAsyncEntry:true } in modern.confifg.ts.

And for question 3 , because rsbuild update the default chunk split name , so the previous strategy not work .

I will fix all questions latter

ScriptedAlchemy commented 1 month ago

ahh async entry is not auto applied in rspack? i thought it might be. okay then yeah, all you need to do is add that flag for modernjs rspack and it should work.

source:{ enableAsyncEntry:true }

2heal1 commented 1 month ago

upgrade to 0.6.3 , the issue should be fixed :D

GiancarlosIO commented 1 month ago

@2heal1 oh wow, that was so fast! 🔥 I'll test the latest version and come back to close the issue after checking that everything works 🙌🏼

Thanks!

GiancarlosIO commented 1 month ago

Thanks @2heal1 @ScriptedAlchemy it works!!!! ❤️

But now I have noticed that the type hints are not correctly generated. I will create a separate issue for this.

image