Chakra UI项目引入@chakra-ui/icons图标报Invalid Hook Call错误如何处理

解决方法 #

• 首先确认@chakra-ui/icons和@chakra-ui/react的版本完全一致：版本不匹配是该问题最常见的诱因，不同版本的Chakra相关包依赖的React上下文不同，会直接触发Hook调用规则异常。你可以执行以下命令查看当前两个包的版本：

yarn list @chakra-ui/react
yarn list @chakra-ui/icons

如果两者版本不一致，统一安装相同版本即可，示例命令如下（将<version>替换为和@chakra-ui/react一致的版本号）：

yarn add @chakra-ui/icons@<version>

• 清理缓存重装依赖：部分时候包管理器缓存会导致加载重复的React实例，也会触发该错误。可以依次执行以下命令：

rm -rf node_modules yarn.lock
yarn cache clean
yarn install

• 固定React版本避免多实例：如果执行完上述操作还是报错，可以检查项目中是否存在多个版本的React：

yarn why react

如果查询结果显示存在多版本React，可以在package.json中新增resolutions字段固定React和ReactDOM的版本：

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

添加后重新执行yarn install即可生效。

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