UMI 4.0.78 + @ant-design/icons 5.2.6

[KylinCai]

function组件中使用antD的Icons会报错违反hooks原则，

index.js:1 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

依赖信息：
"dependencies": {
"@ant-design/icons": "^5.2.6",
"@ant-design/pro-layout": "^7.16.9",
"antd": "^5.8.4",
"axios": "^1.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"umi": "^4.0.78"
},
"devDependencies": {
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@umijs/lint": "^4.0.78",
"@umijs/plugins": "^4.0.78",
"eslint": "^8.47.0",
"file-loader": "^6.2.0",
"stylelint": "^14.16.1",
"typescript": "^5.0.3"
}

[fz6m]

给一个会报错的最小复现看看吧。

[KylinCai]

给一个会报错的最小复现看看吧。

import React from 'react';
import { DoubleLeftOutlined } from '@ant-design/icons'

export default function Page() {
  return (
    <div>
      <DoubleLeftOutlined />
    </div>
  );
}

[fz6m]

我用这个代码片段是可以正常运行的，如有问题，需要给一个可以复现的仓库链接帮助排查。

[KylinCai]

代码仓库：https://github.com/KylinCai/institution/tree/main
问题页面：src/pages/edit.tsx

非常感谢

[fz6m]

你给的这个项目没有在 package.json 安装 @ant-design/icons ，我安装后在 src/pages/edit.tsx 导入可以正常使用：

import React from 'react';
import styles from './edit.less';
import { DoubleLeftOutlined } from '@ant-design/icons'

export default function Page() {
  return (
    <div>
      <h1 className={styles.title}>Page edit</h1>
      <DoubleLeftOutlined />
    </div>
  );
}

如有问题，需要给一个可以复现报错的最小代码仓库。

[KylinCai]

好的，安装了一下就可以了，谢谢。我本来以为package里面有@ant-design/icons这个就是已经安装过

[notfound945]

我使用命令npx create-umi@latest创建的umi项目，也遇到了这问题
Warning: Invalid hook call.
也是看到了package中有@ant-design/icons，一直在找其它问题，
看到此discussion，才remove、add了几次 @ant-design/icons 才成功使用，非常感谢！！