模块联合、React 和 Apollo 3 警告

Question

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

shared通过在我的 webpack 配置中将 React 标记为单例的部分添加一个键解决了这个问题ModuleFederationPlugin。现在一切都编译好了并且似乎运行得很好。

然而，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