Heroicons版本兼容问题求助：多方案尝试后仍报错

问题分析 #

错误提示明确说明：你试图从Heroicons v1的路径@heroicons/react/outline/SearchIcon导入组件，但实际安装的是Heroicons v2，版本不匹配导致报错。手机端偶尔可用是因为临时缓存了旧模块，刷新后缓存失效就会触发版本检测错误。

解决方案 #

以下两种方案任选其一即可：

方案1：统一使用Heroicons v1 #

1. 卸载当前安装的Heroicons版本

npm uninstall @heroicons/react

2. 安装指定v1版本

npm install @heroicons/react@v1

3. 清理Next.js缓存（避免缓存残留引发问题）

• Mac/Linux：

rm -rf .next

• Windows：

rd /s /q .next

4. 重启开发服务器

npm run dev

方案2：升级到Heroicons v2并修正导入路径 #

Heroicons v2调整了导入规则，需要指定图标尺寸（可选24、20、16，以下以24为例）：

1. 修改组件中的导入代码：

// 替换原有导入语句
import {
    SearchIcon,
    PlusCircleIcon,
    UserGroupIcon,
    HeartIcon,
    PaperAirplaneIcon,
    MenuIcon
} from "@heroicons/react/24/outline";
import {HomeIcon} from "@heroicons/react/24/solid"

2. 卸载旧版本并安装v2

npm uninstall @heroicons/react
npm install @heroicons/react

3. 清理缓存并重启开发服务器，步骤同方案1的3、4。

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