Js.WebPack.TryoutsWithTwoApps

Good example lives here.

And here is first tryout – 2 apps, first loadind the second through Module Federation.

And there was a problem about order of loading, leading to the following error.

Key things are the following

app1 loads app2 like this

webpack.config.js

    plugins: [
        new ModuleFederationPlugin({
            name: "app1",
            remotes: {
                app2: "app2@http://localhost:3002/remoteEntry.js",
            },
            shared: {react: {singleton: true}, "react-dom": {singleton: true}},
        }),
        new ExternalTemplateRemotesPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],

App.js

import React, {Suspense} from "react";
const RemoteApp = React.lazy(() => import("app2/App"));

const App = () => {
    return (
        <div>
            <div style={{
                margin:"10px",
                padding:"10px",
                textAlign:"center",
                backgroundColor:"greenyellow"
            }}>
                <h1>App1</h1>
            </div>
            <Suspense fallback={"loading..."}>
                <RemoteApp/>
            </Suspense>
        </div>)
}


export default App;

app2 exposes components like this

webpack.config.js

    plugins: [
        new ModuleFederationPlugin({
            name: "app2",
            filename: 'remoteEntry.js',
            exposes: {
                './App': './src/App'
            },
            shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true } },
        }),
        // new ExternalTemplateRemotesPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],