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

[ScriptedAlchemy]

Use our runtime package https://module-federation.io/guide/basic/runtime.html

[ScriptedAlchemy]

If webpack based build use the experiments hoisted runtime option

https://module-federation.io/configure/experiments.html

Otherwise turn off chunk split or set it to async. Webpack historicaly has bugs when Federation and chunk split are used together. Hoisted runtime experiment attempts to patch some of these bugs in webpack.

[Zhengy1995]

Well，I will try，but I've ever try to set splitChunk to async，it seems useless，btw，thanks for replying

[ScriptedAlchemy]

Send me a repo and I'll debug it for you, or PR with fix

[ScriptedAlchemy]

If you use single runtime chunk. Set runtime: false on federation plugin options

[ScriptedAlchemy]

Oh i did not realize you were bytedance user. You can message me in lark if you need to. But I think team has located the problem here. Related to hrome tools, right?