ModuleFederationPlugin 远程模块未加载

Question

我有两个应用程序。

1. 容器。 Webpack

const baseConfig = {
  mode: 'development',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  entry: {
    main: './src/index.tsx',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: '/node_modules/',
      }
    ],
  },

  devServer: { hot: false, contentBase: path.join(__dirname, 'dist'), port: 3100 },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[id].[contenthash].js',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'Shell',
      library: { type: 'var', name: 'shell' },
      remotes: {
        usersweb: 'usersweb',
      },
      shared: {
        ...deps,
        react: { singleton: true, eager: true, requiredVersion: deps.react },
        'react-dom': { singleton: true, eager: true, requiredVersion: deps['react-dom'] },
      },
    }),

    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],

}

App.tsx

import React from 'react'

const Portal = React.lazy(() => import('usersweb/Portal'))

export default function Shell() {
  return (
    <React.Suspense fallback={'Loading'}>
      <Portal />
    </React.Suspense>
  )
}

第二个应用程序。 Webpack

const baseConfig = {
  mode: 'development',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: '/node_modules/',
      }
    ],
  },
  entry: {
    main: './src/index.tsx',
  },
  output: {
    chunkFilename: '[id].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: { contentBase: path.join(__dirname, 'dist'), port: 3101 },

  plugins: [
    new ModuleFederationPlugin({
      filename: 'remoteEntry.js',
      name: 'usersweb',
      exposes: {
        './Portal': './src/portal',
      },
      shared: {
        ...deps,
        react: { singleton: true, eager: true, requiredVersion: deps.react },
        'react-dom': { singleton: true, eager: true, requiredVersion: deps['react-dom'] },
      },
    }),
  ],
}

./src/portal.tsx

import React from 'react'

const Portal: React.FC = () => {
  return <div>Hello from userweb</div>
}

export default Portal

它应该工作顺利。

但它失败了 因为 webpack_modules 内部存在 webpack/container/reference/usersweb 键，但是当 React.Lazy 需要远程模型时，它需要
webpack/container/remote/usersweb/Portal 未添加并且应用程序崩溃。

remoteEntry.js 已正确加载，我可能会在控制台中看到 userweb 对象。

依赖版本

“反应”：“^17.0.2”， "webpack": "5.21.2", "打字稿": "^4.1.2",

Answer 1

5 天后调试问题出现在 tsconfig.json 中

为了使用 'ts-loader' 正确加载模块，需要添加到 compilerOptions

  "module": "esnext",