Module Federation、React 和 Apollo 3 警告

Question

我正在使用 webpack 5 的模块联合插件构建一个带有微前端的应用程序。一切都很好，直到我开始将反应挂钩添加到我的远程应用程序中。那时我收到了关于“钩子的无效使用”的错误，即我发现我加载了两个版本的反应，一个来自远程，一个来自使用远程的应用程序。

通过在我的 webpack 配置的 ModuleFederationPlugin 部分添加一个 shared 键来解决这个问题，该部分将 React 标记为单例。现在一切都编译好了，看起来运行就好了。

但是，webpack 编译器现在向我抛出一些烦人的警告。它的说法是：

No required version specified and unable to automatically determine one. Unable to find required version for "react" in description file (/Users/myComputer/Development/myapp/node_modules/@apollo/client/react/context/package.json). It need to be in dependencies, devDependencies or peerDependencies.

这是我的 webpack 配置（在远程）目前的样子：

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

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

module.exports = {
  mode: 'development',
  devServer: { port: 3001 },
  entry: './src/index.tsx',
  output: {
    path: __dirname + '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        resolve: {
          extensions: ['.ts', '.tsx', '.js', '.json'],
        },
        use: 'ts-loader',
      },
    ]
  },
  devtool: 'source-map',
  plugins: [
    new ModuleFederationPlugin(
      {
        name: 'myRemote',
        filename: 'remoteEntry.js',
        exposes: {
          './App':
            './src/App/App.tsx',
        },
        shared: {
          'react': {
            singleton: true,
            version: deps['react'],
          },
          'react-dom': {
            singleton: true,
            version: deps['react-dom'],
          },
        },
      }
    ),
    new HtmlWebpackPlugin({
      template:
        './index.html',
    })
  ]
}

消费应用的 webpack 配置几乎相同，尤其是 shared 部分（在声明遥控器方面存在一些细微差别）。

有什么方法可以告诉 webpack apollo 包将从其他地方获取它的 react 依赖项？或者，如果这不是告诉 webpack 的正确信息，那么什么是以及如何摆脱这些警告？

Answer 1

通过将密钥 version 更改为 requiredVersion

解决了我自己的问题

Module Federation、React 和 Apollo 3 警告

Module Federation, React, and Apollo 3 warnings

reactjs

apollo-client

micro-frontend

webpack-5

webpack-module-federation