模块联合、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 解决了我自己的问题