OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to expose a React component from host application to a module federated child application in Micro Front End Architecture?

  • Thread starter Thread starter Md. Shadab Hussain
  • Start date Start date
M

Md. Shadab Hussain

Guest
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) -

Code:
import React from 'react';

const Example = () => {
  return <div>Example</div>;
};

export default Example;

My complete webpack config for shell application -

Code:
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 -

Code:
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',
    }),
  ],
};

I am getting the following error - Cannot find module 'example/exampleApp' or its corresponding type declarations.

Where am I going wrong?

I think I am using the expose and remotes object from module federation plugin correctly only. Can anyone help.

<p>I was exploring the Microfront End Architecture, and I found this very useful github repo <a href="https://github.com/nebarf/module-federation-react-router-dom" rel="nofollow noreferrer">https://github.com/nebarf/module-federation-react-router-dom</a></p>
<p>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.</p>
<p>My React Component from host/shell application that I want to use in child application (app1) -</p>
<pre><code>import React from 'react';

const Example = () => {
return <div>Example</div>;
};

export default Example;
</code></pre>
<p>My complete webpack config for shell application -</p>
<pre><code>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',
}),
],
};

</code></pre>
<p>My complete webpack config for app1 application -</p>
<pre><code>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',
}),
],
};

</code></pre>
<p><a href="https://i.sstatic.net/82dwsRlT.png" rel="nofollow noreferrer">I am getting the following error - Cannot find module 'example/exampleApp' or its corresponding type declarations</a>.</p>
<p>Where am I going wrong?</p>
<p>I think I am using the expose and remotes object from module federation plugin correctly only.
Can anyone help.</p>
 

Latest posts

J
Replies
0
Views
1
Jeff P Chacko
J
Top