javascript - Error: runtimeTemplate.supportsAsyncFunction no es una función

Tengo una aplicación anfitriona y una aplicación remota desarrolladas con Angular 15.

A continuación se muestra la configuración de webpack del host:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  entry: './src/main',
  output: {
    publicPath: 'http://localhost:4200/',
    scriptType: 'text/javascript',
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
  },
  optimization: {
    runtimeChunk: false,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        helloworld: 'helloworld@http://localhost:3000/remoteEntry.js',
      },
    }),
  ],
};

A continuación se muestra la configuración de webpack de MFE:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  output: {
    publicPath: 'http://localhost:3000/',
    scriptType: 'text/javascript',
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        type: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          configFile: 'tsconfig.app.json',
        },
      },
    ],
  },
  optimization: {
    runtimeChunk: false,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'helloworld',
      exposes: {
        './HelloWorldModule': './src/app/hello.module.ts',
      },
    }),
  ],
};

Estoy cargando el módulo MFE en el host usando el siguiente código:

  {
    path: 'flights-search',
    loadChildren: () => // @ts-ignore
    // eslint-disable-next-line no-console
    import('helloworld/HelloWorldModule').then(m => m.Module).catch(error => console.log('Error=>', error))
  },

Al ejecutar npm start en el host, obtengo el siguiente error: external "helloworld@http://localhost:3000/remoteEntry.js" - Error: runtimeTemplate.supportsAsyncFunction no es una función

A continuación se muestran los paquetes que estoy usando:

"webpack-bundle-analyzer": "4.5.0", "webpack-cli": "4.9.2", "webpack": "^5.94.0", "webpack-dev-server": "^4.11.1", "@angular-builders/custom-webpack": "^15.0.0"

Respuesta #1

También me encontré con este problema. La razón de mi problema es que la versión de webpack en el package.json de la aplicación es 5.72.1, pero hay un paquete de terceros en node_modules que depende de la versión de webpack: 5.93.0. Hay dos soluciones: 1. Actualizar la versión de webpack de la aplicación a 5.93.0; 2. Degradar la versión de webpack del paquete de terceros