Tweaking react lazy loading webpack output to combine two webapps

Question

We have a React Webapp where every route is lazy loaded:

const HomeScreen = React.lazy(() => import('../components/HomeScreen/HomeScreen'));

This, as expected, generates various JS files during a production build:

main.js
1.main.js
2.main.js

Is there any way to load those generated production code in another Webapp we have? Do they simply replace the content of a specific DOM element? and if so, how do they go about it?

Extra notes by author: clearly tweaking generated code does not seem like a good practice. However, under our circumstances of having a bundle created by legacy code, if possible, it could prove to be a good intermediate solution for combing new code with legacy code on a routing level. — Guy
– Guy, Commented Mar 22, 2022 at 19:32

Vijayaraghavan Sundararaman · Accepted Answer · 2022-03-22 19:32:48Z

0

You can use Module Fedration for this https://levelup.gitconnected.com/microfrontends-module-federation-exposing-remote-from-legacy-react-webpack4-created-by-f3753d70d34e

answered Mar 22, 2022 at 19:32

Vijayaraghavan Sundararaman

9321 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tweaking react lazy loading webpack output to combine two webapps

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related