应用初始化触发ambiguous indirect export: XMarkIcon错误求助

问题背景 #

环境版本：

• Nuxi 3.2.3
• Nuxt 3.2.3（搭配Nitro 2.2.3）
• tailwindcss 3.2.7

导入语句：

import { Bars3Icon, MagnifyingGlassIcon, ShoppingBagIcon, XMarkIcon } from '@heroicons/vue/24/outline'

报错信息：

Error: ambiguous indirect export: XMarkIcon

已尝试重新安装@heroicons/vue，问题未解决。

解决方案 #

1. 锁定@heroicons/vue的稳定版本 #

部分新版本的@heroicons/vue存在导出结构变动，可能导致Nuxt模块解析出现歧义。执行以下命令安装指定稳定版本：

npm install @heroicons/vue@2.0.18
# 或使用yarn
yarn add @heroicons/vue@2.0.18

2. 改用单个图标导入方式 #

如果版本锁定后仍有问题，尝试直接导入单个图标的文件路径，绕过集合导出的歧义：

import Bars3Icon from '@heroicons/vue/24/outline/Bars3Icon.vue'
import MagnifyingGlassIcon from '@heroicons/vue/24/outline/MagnifyingGlassIcon.vue'
import ShoppingBagIcon from '@heroicons/vue/24/outline/ShoppingBagIcon.vue'
import XMarkIcon from '@heroicons/vue/24/outline/XMarkIcon.vue'

3. 清理Nuxt及依赖缓存 #

缓存残留可能导致解析异常，执行以下步骤：

• 删除node_modules文件夹
• 删除package-lock.json（或yarn.lock）
• 删除.nuxt和.output文件夹
• 重新安装依赖：npm install（或yarn install）
• 重启Nuxt开发服务：nuxi dev

4. 检查Nuxt自动导入配置 #

如果项目配置了Nuxt自动导入，确认是否与手动导入的Heroicons冲突。打开nuxt.config.ts，检查imports配置，避免重复导入同一图标组件。

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