错误：runtimeTemplate.supportsAsyncFunction 不是函数

Question

我有一个使用 Angular 15 开发的主机和远程应用程序。

以下是主机的 webpack 配置：

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',
      },
    }),
  ],
};

以下是 MFE 的 webpack 配置：

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',
      },
    }),
  ],
};

我使用以下代码在主机中加载 MFE 模块：

  {
    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))
  },

在主机中运行 npm start 时，出现以下错误： 外部“helloworld@http://localhost:3000/remoteEntry.js” - 错误：runtimeTemplate.supportsAsyncFunction 不是函数

以下是我正在使用的软件包：

“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”

Answer 1

我也遇到这个问题了。我的问题的原因是应用程序的package.json的webpack版本是5.72.1，但是node_modules下有一个第三方包依赖于webpack的版本：5.93.0。解决方案有两种： 1、将应用的webpack版本升级到5.93.0； 2.降级第三方包的webpack版本