Chakra UI调用createIcon()抛出Invalid hook call错误该如何解决

• 多实例冲突（最高发原因）
  你开发的自定义Icons包如果把react、@chakra-ui/react、@chakra-ui/icons这类公共依赖直接打包进了自身产物，会和宿主create-react-app项目里已经存在的相同依赖形成多份实例，React Hook只能在同一份React实例下运行，就会抛出该错误。
  修复步骤：
  1. 把自定义包package.json里的react、react-dom、@chakra-ui/react、@chakra-ui/icons从dependencies移动到peerDependencies字段，声明依赖由宿主项目提供
  2. 调整自定义包的打包配置（Rollup/tsup/Webpack等），把上述依赖配置为external，打包时排除不打入产物
• 版本不兼容问题
  自定义包使用的React、Chakra UI主版本和宿主create-react-app项目的版本不匹配，也会触发Hook调用异常。
  修复方法：对齐两个项目的React、Chakra UI主版本，同时在自定义包的peerDependencies中写明兼容的版本范围，示例：

  {
    "peerDependencies": {
      "react": "^17 || ^18",
      "@chakra-ui/react": "^2.0.0",
      "@chakra-ui/icons": "^2.0.0"
    }
  }
  

• 编译配置错误
  如果自定义包的编译配置错误，没有正确把JSX语法转译为标准的React调用格式，也可能出现异常报错。
  修复方法：检查打包工具的转译配置，确保产物正确转译JSX，优先输出ES Module和CommonJS两种格式的产物供宿主项目引入。

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