Module Federation error: Module not found: Error: Can't resolve 'search/SearchAppModule' in 'relative path'

[potocnikvid]

I am trying to share a module from an remote Angular app to a host React app. I tried to mimic this repo: https://github.com/harshmons/micro-front-end-react-application

Got the remote Angular app to working correctly:

webpack.config.js

const { ModuleFederationPlugin } = require('webpack').container;
const mf = require("@angular-architects/module-federation/webpack");
const path = require("path");
const share = mf.share;

const sharedMappings = new mf.SharedMappings();
sharedMappings.register(path.join(__dirname, "tsconfig.json"), [
  /* mapped paths to share */
]);

module.exports = {
  output: {
    uniqueName: "search",
    publicPath: "auto",
    scriptType: "text/javascript",
  },
  optimization: {
    runtimeChunk: false,
  },
  resolve: {
    alias: {
      ...sharedMappings.getAliases(),
    },
  },
  experiments: {
    outputModule: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      
      name: "search",
      filename: "remoteEntry.js",
      exposes: {
        './SearchAppModule':'./src/loadApp.ts'
      },
      shared: share({
        "@angular/core": {
          singleton: true,
          strictVersion: true,
          requiredVersion: "auto",
        },
        "@angular/common": {
          singleton: true,
          strictVersion: true,
          requiredVersion: "auto",
        },
        "@angular/common/http": {
          singleton: true,
          strictVersion: true,
          requiredVersion: "auto",
        },
        "@angular/router": {
          singleton: true,
          strictVersion: true,
          requiredVersion: "auto",
        },

        ...sharedMappings.getDescriptors(),
      }),
    }),
    sharedMappings.getPlugin()
  ],
};

package.json

{
  "name": "delo-b5-remote",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular-architects/module-federation": "^14.3.0-beta.3",
    "@angular/cdk": "^16.0.4",
    "@angular/common": "^16.0.0",
    "@angular/core": "^16.0.0",
    "@angular/compiler": "^16.0.0",
    "@angular/forms": "^16.0.0",
    "@angular/material": "^16.0.4",
    "@angular/platform-browser": "^16.0.0",
    "@angular/platform-browser-dynamic": "^16.0.0",
    "@angular/router": "^16.0.0",
    "@ngrx/component-store": "^16.0.0",
    "d3": "^7.8.5",
    "ngx-build-plus": "^16.0.0",
    "querystring-browser": "^1.0.4",
    "rxjs": "~7.8.0",
    "tailwindcss": "^3.3.2",
    "tslib": "^2.3.0",
    "webpack": "^5.90.3",
    "webpack-cli": "^4.10.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.0.1",
    "@angular/cli": "~16.0.1",
    "@angular/compiler-cli": "^16.0.0",
    "@types/jasmine": "~4.3.0",
    "autoprefixer": "^10.4.14",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "typescript": "~5.0.2"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "delo-b5-remote": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
					"builder": "ngx-build-plus:browser",
          "options": {
            "outputPath": "dist/delo-b5-remote",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              {
                "input": "./src/assets/fontawesome/fontawesome.js",
                "inject": true
              }
            ],
            "extraWebpackConfig": "webpack.config.js"
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all",
              "optimization": {
                "scripts": true,
                "styles": {
                  "minify": true,
                  "inlineCritical": false
                },
                "fonts": true
              },
              "extraWebpackConfig": "webpack.prod.config.js"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
					"builder": "ngx-build-plus:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "delo-b5-remote:build:production",
              "extraWebpackConfig": "webpack.prod.config.js"
            },
            "development": {
              "browserTarget": "delo-b5-remote:build:development",
              "extraWebpackConfig": "webpack.config.js"
            }
          },
          "defaultConfiguration": "development",
          "options": {
            "port": 3001,
            "publicHost": "http://localhost:3001",
            "extraWebpackConfig": "webpack.config.js"
          }
        },
        "extract-i18n": {
					"builder": "ngx-build-plus:extract-i18n",
          "options": {
            "browserTarget": "delo-b5-remote:build",
            "extraWebpackConfig": "webpack.config.js"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              {
                "input": "./src/assets/fontawesome/fontawesome.js",
                "inject": true
              }
            ]
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "4696276c-dbc3-485a-a10d-c60f738222c4",
    "schematicCollections": [
      "@angular-eslint/schematics"
    ]
  }
}

loadApp.js

import "zone.js";
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const mount = ()=>{
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

export{mount}

bootstrap.ts

import "zone.js";
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const mount = ()=>{
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

export{mount}

main.ts

import("./bootstrap")

** Angular Live Development Server is listening on localhost:3001, open your browser on http://localhost:3001/ **

But I am having problems with the host in React.

craco.config.js

const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json").dependencies;

module.exports = {
  plugins: [
    {
      plugin: {
        overrideCracoConfig: ({
          cracoConfig,
          pluginOptions,
          context: { env, paths },
        }) => {
          return cracoConfig;
        },
        overrideWebpackConfig: ({
          webpackConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths },
        }) => {
          webpackConfig.plugins = [
            ...webpackConfig.plugins,
            new ModuleFederationPlugin({
              name: "app",
              remotes: {
                search: "search@http://localhost:3001/remoteEntry.js",
              },
              shared: {
                ...deps,
                "react-dom": {
                  singleton: true,
                  eager: true,
                },
                react: {
                  singleton: true,
                  eager: true,
                },
              },
            }),
          ];
          return webpackConfig;
        },
        overrideDevServerConfig: ({
          devServerConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths, proxy, allowedHost },
        }) => {
          return devServerConfig;
        },
        overrideJestConfig: ({
          jestConfig,
          cracoConfig,
          pluginOptions,
          context: { env, paths, resolve, rootDir },
        }) => {
          return jestConfig;
        },
      },
    },
  ],
};       

package.json

  "name": "delo-b5-host",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-brands-svg-icons": "^6.5.1",
    "@fortawesome/free-regular-svg-icons": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-component-load": "^1.0.1",
    "web-vitals": "^2.1.4",
    "webpack": "^5.90.3",
    "webpack-cli": "^4.10.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^7.1.0"
  }
}

App.js

import logo from "./logo.svg";
import "./App.css";
import Search from "./modules/SearchAppModule.js";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <a>
          <FontAwesomeIcon icon={faSearch} />
        </a>
        <Search/>
      </header>
    </div>
  );
}

export default App;

src/modules/SearchAppModule.js

import React, { useEffect, useRef } from "react";

import { mount } from "search/SearchAppModule";

const SearchAppModule = () => {
  const ref = useRef(null);
  useEffect(() => {
    mount();  
  }, []);   
  return <div className="search-app-module" ref={ref} />;
};

export default SearchAppModule;

Thought it was a TypeScript problem, tried declaring modules, did not work:

Microfrontend Cannot find module error for module federation

Tried adding another remote shared module in a similar way, did not work.

Tried changing names in ModuleFederationPlugin, did not work.

[alexander-akait]

It means search/SearchAppModule was not found and it is not a part of module federation

[potocnikvid]

I know that. But why is it not a part of module federation?

new ModuleFederationPlugin({
  name: "search",
  filename: "remoteEntry.js",
  exposes: {
    './SearchAppModule':'./src/loadApp.ts'
  }, ...

new ModuleFederationPlugin({
  name: "app",
  remotes: {
    search: "search@http://localhost:3001/remoteEntry.js",
  },

import { mount } from "search/SearchAppModule";

Am I calling the module in a wrong way? Looks like the file remoteEntry.js is not present on the host after page load. Why could that be?

[alexander-akait]

Can you create a minimum reproducible test repo, I will show you how to fix it, thank you