React 17使用Evergreen UI的Pane组件报错：无效Hook调用

使用的代码如下：

import React from "react";
import {Pane} from 'evergreen-ui';

function App() {
 return (
      <div>
        <Pane
         elevation={2}
         float="left"
         width={200}
         height={120}
         margin={24}
         display="flex"
         justifyContent="center"
         alignItems="center"
         flexDirection="column"
         >
          <h3>Elevation 2</h3>
          <p>Popovers and Dropdowns</p>
         </Pane>
      </div>
    );
}

export default App;

报错截图：

该无效Hook错误是以下两个常见原因导致，可对应排查处理：

• 版本不兼容
  Evergreen UI v7及以上版本仅支持React 18，如果你在React 17项目中安装了v7+版本的Evergreen UI，调用组件时就会触发该报错。
  处理方式：卸载当前版本，安装适配React 17的v6最新版：

  # npm 操作
  npm uninstall evergreen-ui
  npm install evergreen-ui@6
  
  # yarn 操作
  yarn remove evergreen-ui
  yarn add evergreen-ui@6
  

• 存在多份React实例
  项目依赖树中存在多个不同版本的React副本时，也会触发Hook调用规则异常。
  处理方式：
  1. 执行命令检查是否存在重复React依赖：

  # npm 检查
  npm ls react
  
  # yarn 检查
  yarn list react
  

  2. 如果确认有多版本React，在package.json中添加配置固定React版本：
     npm用户新增overrides配置：

  {
    "overrides": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2"
    }
  }
  

  yarn用户新增resolutions配置：

  {
    "resolutions": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2"
    }
  }
  

  配置完成后重新安装依赖即可生效。

内容的提问来源于stack exchange，提问作者Muhammad Rehan Baig