Menu
I'm using React JS + webpack. General case that I need to resolve is to dynamically load React components that were not bundled with main application. Kind of pluggable components that can be developed independently from main app and then loaded by application dynamically, without rebuilding whole app.
Particular case is below.
I have two completely separated modules (i.e. built using different package.json and webpack.config.js):
MainApp
Component
I need to implement following behaviour:
MainApp loaded and initialized.MainApp dynamicaly lookup for url of .js file that contains Component (e.g. by making GET request to web-server).MainApp loads .js file with Component and include it to page as <script>
MainApp uses loaded Component while rendering.Is such use-case possible in react js + webpack?
524
With webpack 5 you can now do this via module federation.
The basic idea is that you "expose" exports from one project to be used in another:
App 1 (uses Button from app2)
<!-- public/index.html -->
<html>
<head>
<!-- remote reference to app 2 -->
<script src="http://localhost:3002/remoteEntry.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
//app.ts
import * as React from "react";
const RemoteButton = React.lazy(() => import("app2/Button"));
const App = () => (
<div>
<h1>Typescript</h1>
<h2>App 1</h2>
<React.Suspense fallback="Loading Button">
<RemoteButton />
</React.Suspense>
</div>
);
export default App;
//... webpack.config.js
plugins: [
new ModuleFederationPlugin({
name: "app1",
library: { type: "var", name: "app1" },
remotes: {
app2: "app2",
},
shared: ["react", "react-dom"],
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
]
App 2 (exposes Button)
// src/Button.ts
import * as React from "react";
const Button = () => <button>App 2 Button</button>;
export default Button;
//... webpack.config.js
plugins: [
new ModuleFederationPlugin({
name: "app2",
library: { type: "var", name: "app2" },
filename: "remoteEntry.js",
exposes: {
Button: "./src/Button",
},
shared: ["react", "react-dom"],
})
]
Here is a repo containing various examples.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
