安装@heroicons/vue 1.0.6后导入图标报错：Module not found

核心原因 #

你安装的@heroicons/vue是1.0.6版本（v1），但代码里用的是v2版本的导入路径（@heroicons/vue/24/outline），两个版本的模块结构完全不同，导致找不到指定模块。

解决办法 #

办法1：升级到v2版本

执行以下命令升级到最新版：

npm install @heroicons/vue@latest

升级完成后，你当前的导入代码可以直接正常使用，v2版本就是按24/outline、24/solid这类路径分组导入图标的。

办法2：保留v1版本，修改导入写法

v1版本的图标直接从@heroicons/vue的子包导出，且部分图标名称有差异，比如你用到的两个图标需要改成：

<script setup>
import { ExclamationTriangleIcon, XIcon } from '@heroicons/vue/outline'
</script>

注意：v1里没有XMarkIcon，对应的关闭图标是XIcon。

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