-
-
Notifications
You must be signed in to change notification settings - Fork 380
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: make packages webpack 5 compatible #638
feat: make packages webpack 5 compatible #638
Conversation
Signed-off-by: Stéphane Robino <stephane@wttj.co> Signed-off-by: Robert Douglas <robert@wttj.co>
Fixes #636. PS @ScriptedAlchemy this is the fix you were looking for. |
@StephaneRob - just it time. Thank you so much for this contribution. |
Hi.Even after these changes loadable is failing in SSR for federated modules while using webpack 5. I have also raised the issue. |
Federated modules need to be handled a specific way. I don't think Babel can extract chunk mappings. @theKashey I'll update my ssr example then let's see what's needed for MF support. |
Thanks @ScriptedAlchemy . I saw your Repo https://github.com/module-federation/module-federation-examples/tree/master/server-side-render-only. It works when @Loadable fixes are merged into this.But there is no example where components are imported using loadable function.It fails for me there in SSR https://github.com/ajayjaggi/MicroForntEnd-Basic-Structure - This is my repo where i have tried this. |
Ahhh. Yeah that's because loadable probs tried to babelify the import into a hoc. But there's no chunkmapping so hydration issues can happen. You could try enabling top level await. But I think chunk flushing might still be a problem. |
Same issue I ran into with next. I've been using lazy hydration so the component remains static till webpack runtime is booted, then I'd resolve the import client side and allow the component to hydrate |
Also i wanted to know that how module federation along with loadable will handle the issue of larger waterfall. How can host server find out the dependencies from the client container of remote server ? |
Meanwhile - can we move from merged PR to an open issue -> #638 |
If you have the remotes on the page immediately. Like hardcoded. All remote code should transport down in a single RTT. If you want to SSR the chunks a remote requires:
Whenever you use loadable. Babel basically transforms the import into a object with a normal require statement and the module / chunk id. Then it's executed the HOC pushes these IDs into a scope that the server can access after the react render. The only Id it will have is ./someExposedModule - and we would need to go over the remotes stats and find what the browser side script is for that module. Same problem exists in next js. The loadable method straight crashes. You could also use partial hydration and simply hydrate markup when visible. I don't foresee this being hard to accomplish. Especially since I can extend MF apis at will. We could even change the getter on the remote so whenever a server gets code from the remote, it's container will report what request was asked for from the remote. It actually could be done without and need for Babel at all, or even loadable HOC. The only part we would need to adapt is ChunkExtractor to read from the second scope the remote containers are accessing directly. This mechanism would work exactly like react-universal does. Push right into a map, but we will be doing this inside the webpack runtime directly. |
Out or curiosity—and sorry for interjecting in the middle of the conversation, is there a reason this update has not been published on npm already? |
the absence of a webpack5 based automated test to make this release a little more secure |
During the testing, I've actually found a real blocker for |
Signed-off-by: Stéphane Robino <stephane@wttj.co> Signed-off-by: Robert Douglas <robert@wttj.co>
Summary
make packages compatible with Webpack 4 and Webpack 5