I am working on setting up a webpack build using module federation. Everything was working fine, I was able to run a build on the child app and the parent app would build with the updates.
However I started noticing that my updates were not coming through. After extensive testing I completely cleared the server hosting my child app and to my surprise the parent app was still rendering the child.
This leads my to believe my webpack federation folder is being cached somehow. I am quite new to this so any guidance would be helpful.
Child App config
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
// import ModuleFederationPlugin from webpack
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const { ImportMetaEnvWebpackPlugin } = require('import-meta-env-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/entry.ts',
mode: 'development',
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
configFile: 'tsconfig.webpack.json',
},
},
],
exclude: /node_modules/,
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
{
test: /\.(js|jsx)?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
],
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
process: 'process/browser',
},
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
}),
new ModuleFederationPlugin({
name: 'ReferralsUI',
filename: 'remoteEntry.js',
exposes: {
'./GridApp': './src/GridApp.tsx',
},
shared: {
react: {
singleton: true,
version: '18.2.0',
requiredVersion: '18.2.0',
},
'react-dom': {
singleton: true,
version: '18.2.0',
requiredVersion: '18.2.0',
},
'react-router-dom': {
singleton: true,
version: '6.21.3',
requiredVersion: '6.21.3',
},
'@mui/material': {
singleton: true,
version: '5.15.6',
requiredVersion: '5.15.6',
},
},
}),
// fix "process is not defined" error:
new webpack.EnvironmentPlugin([
'VITE_REFERRAL_API_URL',
'VITE_REFERRAL_API_KEY',
'VITE_COMMON_API_URL',
'VITE_COMMON_API_KEY',
'VITE_SECURITY_API_URL',
'VITE_SECURITY_API_KEY',
'VITE_COMMON_BUSINESS_API_URL',
'VITE_COMMON_BUSINESS_API_KEY',
]),
],
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
process: 'process/browser',
},
},
target: 'web',
output: {
path: path.resolve(__dirname, 'dist/federation'),
},
}
Host App Config
import path from 'path'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import * as webpack from 'webpack'
import type * as webpackDevServer from 'webpack-dev-server'
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
type Configuration = webpack.Configuration
const config: Configuration = {
mode:
(process.env.NODE_ENV as 'production' | 'development' | undefined) ??
'development',
entry: './src/index.tsx',
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
process: 'process/browser',
},
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
publicPath: '/',
},
plugins: [
new CopyWebpackPlugin({
patterns: [{from: 'public'}],
}),
new webpack.DefinePlugin({
'process.env': {
REACT_APP_ENVIRONMENT: JSON.stringify('development'),
},
}),
new webpack.EnvironmentPlugin([
'REACT_APP_ENVIRONMENT',
'REACT_APP_COMMON_API_URL',
'REACT_APP_NAME',
'REACT_APP_COMMON_API_URL',
'REACT_APP_COMMON_BACKEND_APP_KEY',
'REACT_APP_COMMON_APP_TYPE',
'REACT_APP_APPLICATIONNAME',
'REACT_APP_SUBMISSION_API_URL',
'REACT_APP_SUBMISSION_API_KEY',
'REACT_APP_PROPERTY_API_URL',
'REACT_APP_PROPERTY_API_KEY',
'REACT_APP_PROPERTY_COMMON_API_URL',
'REACT_APP_PROPERTY_COMMON_API_KEY',
'REACT_APP_REFERENCE_API_URL',
'REACT_APP_SECURITY_API_URL',
'REACT_APP_SECURITY_API_KEY',
]),
new ModuleFederationPlugin({
name: 'G2Property',
remotes: {
ReferralsUI: `ReferralsUI@${process.env.REACT_APP_URL_REFERRALS_UI}`,
},
shared: {
react: {
singleton: true,
version: '18.2.0',
requiredVersion: '18.2.0',
},
'react-dom': {
singleton: true,
version: '18.2.0',
requiredVersion: '18.2.0',
},
},
}),
],
devServer: {
server: 'https',
historyApiFallback: {
index: 'index.html',
},
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 3200,
},
}
export default config