I was exploring the Microfront End Architecture, and I found this very useful github repo https://github.com/nebarf/module-federation-react-router-dom
My usecase is I want to expose a component from my host/shell application to my module federated child application, in this case app1. But not able to do so.
My React Component from host/shell application that I want to use in child application (app1) -
import React from 'react';
const Example = () => {
return <div>Example</div>;
};
export default Example;
My complete webpack config for shell application -
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const deps = require('./package.json').dependencies;
module.exports = {
output: {
publicPath: 'http://localhost:8080/',
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
},
devServer: {
port: 8080,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.(css|s[ac]ss)$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'shell',
filename: 'remoteEntry.js',
remotes: {
app1: 'app1@http://localhost:8081/remoteEntry.js',
app2: 'app2@http://localhost:8082/remoteEntry.js',
},
exposes: {
'./example': './src/components/Example',
},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
},
},
}),
new HtmlWebPackPlugin({
template: './src/index.html',
}),
],
};
My complete webpack config for app1 application -
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const deps = require('./package.json').dependencies;
module.exports = {
output: {
publicPath: 'http://localhost:8081/',
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
},
devServer: {
port: 8081,
historyApiFallback: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.(css|s[ac]ss)$/i,
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: 'app1',
filename: 'remoteEntry.js',
remotes: {
exampleApp: 'shell@http://localhost:8080/remoteEntry.js',
},
exposes: {
'./App1Index': './src/bootstrap',
},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
requiredVersion: deps['react-dom'],
},
},
}),
new HtmlWebPackPlugin({
template: './src/index.html',
}),
],
};
Where am I going wrong?
I think I am using the expose and remotes object from module federation plugin correctly only. Can anyone help.