-
Notifications
You must be signed in to change notification settings - Fork 581
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在项目中引入Antd Icon相关组件时报错 #663
Comments
使用pnpm安装也遇到了此问题,请问有解决方案了吗? |
给个重现吧。 |
我用pnpm就没这个问题了,但是我不能保证我下面其他人在写的时候都是pnpm,所以还是很头疼这个问题 |
@pqcqaq 应该是依赖了不同的 React 版本导致有两个 React 实例导致的,请 npm ls react 看看。把 React 版本改成一样的。 |
@afc163 (base) PS D:\Develop\Coding\oakDevelop\webot\webot-blocks> npm ls react
webot-blocks@1.0.0 D:\Develop\Coding\oakDevelop\webot\webot-blocks
├─┬ @ant-design/icons@5.4.0
│ ├─┬ rc-util@5.43.0
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @headlessui/react@2.1.2
│ ├─┬ @floating-ui/react@0.26.21
│ │ ├─┬ @floating-ui/react-dom@2.1.1
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ @react-aria/focus@3.18.1
│ │ ├─┬ @react-aria/utils@3.25.1
│ │ │ ├─┬ @react-stately/utils@3.10.2
│ │ │ │ └── react@18.2.0 deduped
│ │ │ └── react@18.2.0 deduped
│ │ ├─┬ @react-types/shared@3.24.1
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ @react-aria/interactions@3.22.1
│ │ ├─┬ @react-aria/ssr@3.9.5
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ @tanstack/react-virtual@3.8.4
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @heroicons/react@2.1.5
│ └── react@18.2.0 deduped
├─┬ rc-slider@11.1.5
│ └── react@18.2.0 deduped
├─┬ re-resizable@6.9.17
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-router-dom@6.26.0
│ ├─┬ react-router@6.26.0
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├── react@18.2.0
├─┬ styled-components@6.1.12
│ └── react@18.2.0 deduped
└─┬ webot-core@1.0.0 -> .\..\webot-core
├─┬ @ant-design/icons@5.4.0
│ ├─┬ rc-util@5.43.0
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @headlessui/react@2.1.2
│ ├─┬ @floating-ui/react@0.26.22
│ │ ├─┬ @floating-ui/react-dom@2.1.1
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ @react-aria/focus@3.18.1
│ │ ├─┬ @react-aria/utils@3.25.1
│ │ │ ├─┬ @react-stately/utils@3.10.2
│ │ │ │ └── react@18.2.0 deduped
│ │ │ └── react@18.2.0 deduped
│ │ ├─┬ @react-types/shared@3.24.1
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ @react-aria/interactions@3.22.1
│ │ ├─┬ @react-aria/ssr@3.9.5
│ │ │ └── react@18.2.0 deduped
│ │ └── react@18.2.0 deduped
│ ├─┬ @tanstack/react-virtual@3.8.4
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├─┬ @heroicons/react@2.1.5
│ └── react@18.2.0 deduped
├─┬ rc-slider@11.1.5
│ └── react@18.2.0 deduped
├─┬ react-dom@18.2.0
│ └── react@18.2.0 deduped
├─┬ react-router-dom@6.26.0
│ ├─┬ react-router@6.26.0
│ │ └── react@18.2.0 deduped
│ └── react@18.2.0 deduped
├── react@18.2.0
├─┬ styled-components@6.1.12
│ └── react@18.2.0 deduped
└─┬ webot-core@1.0.0 -> .\..\webot-core
└── react@18.2.0 deduped
似乎只有看到react@18.2.0版本,请问我应该如何操作 |
拆一个最小重现发出来? |
我刚刚尝试复现这个问题,但是在我新创建的项目中始终无法复现,只有现在在开发的项目才有这个问题,很奇怪,我再试一试 |
我发现问题的原因了,在我当前开发的项目中,有两个独立的子项目,一个为core一个为blocks,分别在独立的两个目录,core由我进行维护,每次修改完我都以tsc编译到lib目录,而blocks项目通过"webot-core": "file:../webot-core"的方式引入core,然后在使用到webot-core中的Icon组件时就会引起上面的错误,比如“import Icon from "webot-core/lib/components/base/Icon";”,如果将core编译后的lib目录直接复制到blocks项目中,则不会引起这个错误。我今天尝试一下分离一个最小的复现出来。 |
file 协议?这看上去就是两个独立的引用方式了,我猜测这是导致两份 React 的原因。 |
在你的描述中提到的问题可能导致 React 出现两个版本的问题,这通常与 Node.js 和模块解析的方式有关。以下是一些可能的原因和解决方案: 1.
|
https://github.com/pqcqaq/antd-icon-issue.git 首先在webot-core-modi中执行npm install,然后再在webot-blocks-modi中执行npm install && npm run start,就能够看到这个问题 |
@afc163 https://github.com/northpbear/antd-icons-issue pnpm install 访问 http://localhost:8000/ 即可复现 |
@afc163 请问有什么进展吗 |
是umi的mfsu的问题,关了就好了 |
那估计又是 mfsu 导致多实例的问题,试试:https://umijs.org/docs/guides/mfsu#react-%E5%A4%9A%E5%AE%9E%E4%BE%8B%E9%97%AE%E9%A2%98 |
以下是我的package.json依赖相关部分:
我使用npm install 进行安装,在运行时只要引入了icon相关组件就会报错,例如:
The text was updated successfully, but these errors were encountered: