Returning 404 not found for the micro frontend dependencies from the host application

Question

I am trying to implement a POC on micro frontends using module federation as an integration tool. I am able to run micro frontend separately(running on port 4001) but when I tried to run a host application(running on port 4000) that has microfrontend integrated into it, It was throwing errors saying that it couldn't able to found MF's dependencies i.e react-redux and redux toolkit as shown in the below image. Host application doesn't have react-redux and redux toolkit as dependencies and I am not sure why it is trying to get dependencies from port 4000 instead of 4001. Can I know how to resolve this issue?

Host -webpack.config

const config: Configuration = {
    mode: 'development',
    output: {
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/i,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/preset-typescript'
                        ]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'container',
            remotes: {
                mf1: 'mf1@http://localhost:4001/remoteEntry.js'
            },
            shared: [deps]
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new HotModuleReplacementPlugin(),
        new ForkTsCheckerWebpackPlugin({
            async: false
        }),
        new ESLintPlugin({
            extensions: ['js', 'jsx', 'ts', 'tsx']
        })
    ],
    devtool: 'inline-source-map',
    devServer: {
        static: path.join(__dirname, 'build'),
        historyApiFallback: true,
        port: 4000,
        open: true
    }
};

export default config;

MF- webpack.config.js

const config: Configuration = {
    mode: 'development',
    output: {
        publicPath: '/'
    },
    entry: './src/index',
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/i,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                            '@babel/preset-typescript'
                        ]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    plugins: [
        new ModuleFederationPlugin({
            name: 'mf1',
            filename: 'remoteEntry.js',
            library: {type: 'var', name: 'mf1'},
            exposes: {
                './Mf1App': './src/bootstrap'
            },
            shared: [deps]
        }),
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new HotModuleReplacementPlugin(),
        new ForkTsCheckerWebpackPlugin({
            async: false
        }),
        new ESLintPlugin({
            extensions: ['js', 'jsx', 'ts', 'tsx']
        })
    ],
    devtool: 'inline-source-map',
    devServer: {
        static: path.join(__dirname, 'build'),
        historyApiFallback: true,
        port: 4001,
        open: true
    }
};

export default config;

Host-package.json

{
    "name": "container",
    "version": "1.0.0",
    "description": "",
    "main": "index.ts",
    "scripts": {
        "start": "webpack serve --config config/webpack.dev.config.ts",
        "build": "webpack --config config/webpack.prod.config.ts",
        "lint": "eslint \"*/**/*.{js,ts,tsx}\"",
        "lint:fix": "eslint \"*/**/*.{js,ts,tsx}\" --fix"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/plugin-transform-runtime": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.15.0",
        "@babel/runtime": "^7.15.4",
        "@types/node": "^16.10.9",
        "@types/react": "^17.0.29",
        "@types/react-dom": "^17.0.9",
        "@types/webpack": "^5.28.0",
        "@types/webpack-dev-server": "^4.3.1",
        "@typescript-eslint/eslint-plugin": "^5.0.0",
        "@typescript-eslint/parser": "^5.0.0",
        "babel-loader": "^8.2.2",
        "eslint": "^8.0.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.25.2",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.26.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "fork-ts-checker-webpack-plugin": "^6.3.4",
        "html-webpack-plugin": "^5.3.2",
        "prettier": "^2.4.1",
        "ts-node": "^10.3.0",
        "tsconfig-paths-webpack-plugin": "^3.5.1",
        "webpack": "^5.58.2",
        "webpack-cli": "^4.9.0",
        "webpack-dev-server": "^4.3.1",
        "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
        "clean-webpack-plugin": "^3.0.0",
        "typescript": "^4.4.4",
        "eslint-webpack-plugin": "^2.4.1"
    },
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}

MF1-package.json

{
    "name": "microfrontend1",
    "version": "1.0.0",
    "description": "",
    "main": "index.ts",
    "scripts": {
        "start": "webpack serve --config config/webpack.dev.config.ts",
        "build": "webpack --config config/webpack.prod.config.ts",
        "lint": "eslint \"*/**/*.{js,ts,tsx}\"",
        "lint:fix": "eslint \"*/**/*.{js,ts,tsx}\" --fix"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.15.8",
        "@babel/plugin-transform-runtime": "^7.15.8",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.15.0",
        "@babel/runtime": "^7.15.4",
        "@types/node": "^16.10.9",
        "@types/react": "^17.0.29",
        "@types/react-dom": "^17.0.9",
        "@types/webpack": "^5.28.0",
        "@types/react-redux": "^7.1.19",
        "@types/webpack-dev-server": "^4.3.1",
        "@typescript-eslint/eslint-plugin": "^5.0.0",
        "@typescript-eslint/parser": "^5.0.0",
        "babel-loader": "^8.2.2",
        "eslint": "^8.0.1",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "^2.25.2",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-react": "^7.26.1",
        "eslint-plugin-react-hooks": "^4.2.0",
        "fork-ts-checker-webpack-plugin": "^6.3.4",
        "html-webpack-plugin": "^5.3.2",
        "prettier": "^2.4.1",
        "ts-node": "^10.3.0",
        "tsconfig-paths-webpack-plugin": "^3.5.1",
        "webpack": "^5.58.2",
        "webpack-cli": "^4.9.0",
        "webpack-dev-server": "^4.3.1",
        "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
        "clean-webpack-plugin": "^3.0.0",
        "typescript": "^4.4.4",
        "eslint-webpack-plugin": "^2.4.1"
    },
    "dependencies": {
        "@reduxjs/toolkit": "^1.6.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-redux": "^7.2.5"
    }
}

Answer 1

In MF webpack.config.js update the output object as below:

`output: {
   publicPath: 'http://localhost:4001/'
}`

Let me know if it helped.