在项目中引入Antd Icon相关组件时报错

[pqcqaq]

以下是我的package.json依赖相关部分：

	"devDependencies": {
		"@types/node": "^20.14.12",
        "@types/react": "^18.0.12",
        "@types/react-dom": "^18.0.5",
		"@typescript-eslint/eslint-plugin": "^8.0.0",
		"chokidar": "^3.6.0",
		"copyfiles": "^2.4.1",
		"eslint-plugin-prettier": "^5.2.1",
		"eslint-plugin-react": "^7.35.0",
		"ts-node": "^10.9.2",
		"tsc-alias": "^1.8.10",
		"typescript": "^5.5.3",
		"vite": "^5.3.4",
		"webot-core": "file:../webot-core"
	},
	"peerDependencies": {
		"react": "~18.2.0",
		"react-dom": "~18.2.0",
		"react-router-dom": ">=6.3.0"
	},
	"dependencies": {
		"@ant-design/icons": "^5.2.6",
		"@headlessui/react": "^2.1.2",
		"@heroicons/react": "^2.1.5",
		"eslint-import-resolver-alias": "^1.1.2",
		"eslint-plugin-import": "^2.29.1",
		"rc-slider": "^11.1.1",
		"re-resizable": "^6.9.17",
		"styled-components": "^6.1.12"
	}

我使用npm install 进行安装，在运行时只要引入了icon相关组件就会报错，例如：

import { MenuFoldOutlined } from "@ant-design/icons";

[northpbear]

使用pnpm安装也遇到了此问题，请问有解决方案了吗？

[afc163]

给个重现吧。

[pqcqaq]

到了此问题，请问有解决方案了吗？

我用pnpm就没这个问题了，但是我不能保证我下面其他人在写的时候都是pnpm，所以还是很头疼这个问题

[afc163]

@pqcqaq 应该是依赖了不同的 React 版本导致有两个 React 实例导致的，请 npm ls react 看看。把 React 版本改成一样的。

[pqcqaq]

@afc163
我使用npm ls react的执行结果如下：

(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版本，请问我应该如何操作

[afc163]

拆一个最小重现发出来？

[pqcqaq]

拆一个最小重现发出来？

我刚刚尝试复现这个问题，但是在我新创建的项目中始终无法复现，只有现在在开发的项目才有这个问题，很奇怪，我再试一试

[pqcqaq]

@afc163

我发现问题的原因了，在我当前开发的项目中，有两个独立的子项目，一个为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项目中，则不会引起这个错误。我今天尝试一下分离一个最小的复现出来。

[afc163]

file 协议？这看上去就是两个独立的引用方式了，我猜测这是导致两份 React 的原因。

[afc163]

在你的描述中提到的问题可能导致 React 出现两个版本的问题，这通常与 Node.js 和模块解析的方式有关。以下是一些可能的原因和解决方案：

1. node_modules 目录结构导致的问题

如果 core 和 blocks 项目各自都安装了 React 依赖，那么 Node.js 模块解析机制可能会导致加载不同的 React 实例，这会导致两个版本的 React 被加载。

解决方案：

• 确保使用相同的 React 版本：确保在 core 和 blocks 项目中都使用相同版本的 React。

• 将 React 作为 peerDependency：在 core 项目的 package.json 中，将 React 声明为 peerDependency，而不是普通的 dependency。这意味着 blocks 项目将负责安装 React 依赖，确保只有一个 React 实例。

// core/package.json
{
  "name": "webot-core",
  "version": "1.0.0",
  "peerDependencies": {
    "react": "^17.0.2"
  }
}

然后在 blocks 项目的 package.json 中正常安装 React 依赖：

// blocks/package.json
{
  "name": "webot-blocks",
  "version": "1.0.0",
  "dependencies": {
    "react": "^17.0.2",
    "webot-core": "file:../webot-core"
  }
}

2. NPM link 导致的问题

使用 npm link 或类似的本地文件引用方式 (file:) 可能会导致模块解析问题。

解决方案：

• 使用 Yarn Workspaces：Yarn Workspaces 是一种管理多个包依赖关系的工具，可以确保所有项目共享相同的依赖关系。在根目录创建一个 package.json 文件，并配置 Workspaces。

// package.json (根目录)
{
  "private": true,
  "workspaces": ["webot-core", "webot-blocks"]
}

然后在 webot-core 和 webot-blocks 中移除对彼此的本地文件引用依赖，运行 yarn install 来安装依赖。这样可以确保所有包共享同一个 node_modules 目录，避免出现多个 React 版本。

3. 检查重复依赖

确保 blocks 项目中没有直接或间接安装其他版本的 React。

解决方案：

• 使用工具检查依赖树：使用 npm ls react 或 yarn list react 检查项目依赖树中是否存在多个 React 版本。

npm ls react
# 或
yarn list react

通过这些步骤，可以定位并解决由于多个 React 实例导致的问题。这不仅有助于避免 React 的版本冲突，还能确保你的应用运行稳定。

[pqcqaq]

@afc163

https://github.com/pqcqaq/antd-icon-issue.git

首先在webot-core-modi中执行npm install，然后再在webot-blocks-modi中执行npm install && npm run start，就能够看到这个问题

[northpbear]

@afc163 https://github.com/northpbear/antd-icons-issue

pnpm install
pnpm app start

访问 http://localhost:8000/ 即可复现

[northpbear]

@afc163 请问有什么进展吗

[northpbear]

是umi的mfsu的问题，关了就好了

[afc163]

那估计又是 mfsu 导致多实例的问题，试试：https://umijs.org/docs/guides/mfsu#react-%E5%A4%9A%E5%AE%9E%E4%BE%8B%E9%97%AE%E9%A2%98