fn is not a function while loading "./Module" from webpack/container/reference/builder error while implementing module federation

Question

I am trying to connect 2 application using module federation.

The shell app is built with nx workspace nx g react:host shell.

The remote app is in another workspace that uses lerna.

i keep getting the above error without knowing what is the issue

webpack configs for remote app

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { dependencies } = require("./package.json");
module.exports = {
  entry: "./src/index.tsx",
  mode: "development",
  devServer: {
    port: 3000, // port 3001 for header-app
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "Content-Type",
      Authorization: "Authorization",
      "Access-Control-Allow-Methods": "*",
    },
    historyApiFallback: true,
    hot: false,
    liveReload: false,
    allowedHosts: "all",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                "@babel/preset-env",
                "@babel/preset-react",
                "@babel/preset-typescript",
              ],
            },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          // Assuming you are using style-loader and css-loader
          "style-loader", // Creates `style` nodes from JS strings
          "css-loader", // Translates CSS into CommonJS
          "less-loader", // Compiles Less to CSS
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new ModuleFederationPlugin({
      name: "builder", // This application named 'HeaderApp'
      filename: "remoteEntry.js", // output a js file
      exposes: {
        // which exposes
        "./Module": "./src/remote-entry.ts", // a module 'Header' from './src/App'
      },
      shared: {
        // and shared
        ...dependencies, // some other dependencies
        react: {
          // react
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          // react-dom
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },
    }),
  ],
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx"],
  },
  target: "web",
};

webpack config for shell application

import { composePlugins, withNx } from '@nx/webpack';
import { withReact } from '@nx/react';
import { withModuleFederation } from '@nx/react/module-federation';

import baseConfig from './module-federation.config';

const config = {
  ...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
export default composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config)
);

module federation config in shell

import { ModuleFederationConfig } from '@nx/webpack';
// import { dependencies } from '../package.json';
const config: ModuleFederationConfig = {
  name: 'shell',
  /**
   * To use a remote that does not exist in your current Nx Workspace
   * You can use the tuple-syntax to define your remote
   *
   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
   *
   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
   * following content:
   *
   * declare module 'my-external-remote';
   *
   */
  remotes: [
    ['builder', 'http://localhost:3000/'],
  ],
};

export default config;

when i link the shell to an application in the same workspace everything works fine

the lerna workspace has many packages that are imported in the remote application

i tried limiting the chunk size to 1 with webpack in the remote application but it stopped working

new webpack.optimize.LimitChunkCountPlugin({
  maxChunks: 1,
}),

i added bootstrap.tsx, entry.js, main.ts and still no results

bootstrap.tsx

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

entry.js

import('./index.tsx')

main.ts

import('./bootstrap');