Cannot read properties of undefined (reading 'init')

[krishnagogada]

I'm new to module federation, I got this error Cannot read properties of undefined when reading 'init'. I provided configurations below which I kept.

This is the config of remote app(this app should act as both remote and host)

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
const deps = require('./package.json').dependencies

function getSharedDependencies() {
   const sharedDependencies = {}
   Object.keys(deps).forEach(key => {
      sharedDependencies[key] = deps[key]
   })
   return sharedDependencies
}

module.exports = {
   style: {
      css: {
         loaderOptions: {
            url: false
         }
      }
   },
   webpack: {
      configure: (webpackConfig, { env, paths }) => {
         if (env === 'production') {
            webpackConfig.optimization = {
               ...webpackConfig.optimization,
               runtimeChunk: 'single',
               splitChunks: {
                  ...webpackConfig.optimization.splitChunks,
                  chunks: 'async',
                  cacheGroups: {
                     node_vendors: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'node_vendors',
                        chunks: 'initial'
                     },
                     store_vendors: {
                        test: /[\\/]src[\\/].*[\\/]+stores[\\/]/,
                        name: 'stores',
                        chunks: 'initial'
                     }
                  }
               }
            }
         } else {
            webpackConfig.optimization = {
               ...webpackConfig.optimization,
               runtimeChunk: false,
               splitChunks: {
                  ...webpackConfig.optimization.splitChunks,
                  chunks: 'async'
               }
            }
         }
         webpackConfig.resolve.fallback = {
            ...webpackConfig.resolve.fallback,
            path: require.resolve('path-browserify'),
            buffer: require.resolve('buffer'),
            util: require.resolve('util'),
            assert: require.resolve('assert')
         }
         webpackConfig.output.publicPath = 'auto'
         webpackConfig.plugins = [
            ...webpackConfig.plugins,
            new ModuleFederationPlugin({
               name: 'myApp',
               filename: 'remoteEntry-0.1.0.js',
               exposes: {
                  './myAppRemoteEntry': './src/myAppRemoteEntry'
               },
               shared: {
                  ...getSharedDependencies(),
                  react: {
                     singleton: true,
                     eager: true,
                     requiredVersion: deps.react
                  },
                  'react-dom': {
                     singleton: true,
                     eager: true,
                     requiredVersion: deps['react-dom']
                  }
               }
            })
         ]
         webpackConfig.ignoreWarnings = [/Failed to parse source map/]
         webpackConfig.module.rules.push({
            test: /\.m?js/,
            resolve: {
               fullySpecified: false
            }
         })
         webpackConfig.plugins = webpackConfig.plugins.filter(
            plugin => !(plugin instanceof HtmlWebpackPlugin)
         )
         webpackConfig.plugins.push(
            new HtmlWebpackPlugin({
               template: './public/index.html'
            })
         )
         return webpackConfig
      }
   }
}

Host app config

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const deps = require("./package.json").dependencies;

function getSharedDependencies() {
  const sharedDependencies = {};
  Object.keys(deps).forEach((key) => {
    sharedDependencies[key] = deps[key];
  });
  return sharedDependencies;
}

module.exports = {
  style: {
    css: {
      loaderOptions: {
        url: false,
      },
    },
  },
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      webpackConfig.plugins = [
        ...webpackConfig.plugins,

        new ModuleFederationPlugin({
          name: "MyApp",
          filename: "remoteEntry.js",
          shared: {
            ...getSharedDependencies(),
            react: {
              singleton: true,
              eager: true,
              requiredVersion: deps.react,
            },
            "react-dom": {
              singleton: true,
              eager: true,
              requiredVersion: deps["react-dom"],
            },
          },
        }),
        new HtmlWebpackPlugin({
          template: "./public/index.html",
        }),
      ];
      webpackConfig.ignoreWarnings = [/Failed to parse source map/];

      return webpackConfig;
    },
  },
};

In host app i loaded remoteEntry-0.1.0.js dynamically

function loadComponent(scope, module) {
  return new Promise(async (resolve, reject) => {
    try {
      //@ts-ignore
      await __webpack_init_sharing__("default");
      const container = window[scope];
      //@ts-ignore
      await container.init(__webpack_share_scopes__.default);
      //@ts-ignore
      const factory = await window[scope].get(`${module}`);
      const Module = factory();
      resolve(Module);
    } catch (error) {
      reject(error);
    }
  });
}

loadComponent('myApp','myAppRemoteEntry')

From the remote app if I keep runtimeChunk: false and without splitChunks it is working fine.
If I keep runtimeChunk: single and splitChunks then Cannot read properties of undefined (reading 'init') error is raised at the line await container.init(__webpack_share_scopes__.default) from the above code.

what might be the issue?

[iJigg]

In your remote config:

 exposes: {
    './myAppRemoteEntry': './src/myAppRemoteEntry'
 },

In your host loadComponent you try to resolve 'myAppRemoteEntry' instead of the exposed name in your remote config, I believe this is where your issue is.

loadComponent('myApp', './myAppRemoteEntry') should solve your issue