如何在不使用强制标志的情况下用NPM安装多版本React？

问题根源 #

npm的别名依赖（比如react-17: npm:react@^17）不会自动关联peer依赖，react-dom@17需要匹配版本的react@17，但npm默认会查找名为react的包而非别名react-17，因此触发依赖解析错误。

解决方案 #

通过npm的overrides配置，强制让react-dom-17的peer依赖react指向我们的别名包react-17，具体配置如下：

1. 修改package.json的依赖和overrides字段：

{
  "dependencies": {
    "react": "^16.8.6",
    "react-17": "npm:react@^17.0.2",
    "react-dom": "^16.8.6",
    "react-dom-17": "npm:react-dom@^17.0.2"
  },
  "overrides": {
    "react-dom-17": {
      "react": "$react-17"
    }
  }
}

这里的$react-17是npm内置变量，直接引用项目中安装的react-17别名包，精准满足react-dom@17对react@17的peer依赖要求。

2. 重新执行安装命令：

npm install

验证使用 #

安装完成后，可在代码中分别导入两个版本的React进行测试：

// 使用React 16
import React from 'react';
import ReactDOM from 'react-dom';

// 使用React 17
import React17 from 'react-17';
import ReactDOM17 from 'react-dom-17';

内容的提问来源于stack exchange，提问作者xROOKH