Nuxt3集成Heroicons构建失败：出现index.js.js文件找不到错误

问题重现 #

开发环境执行npm run dev时应用正常、图标可正常显示，但执行npm run build时Nitro构建报错：

✔ Generated public .output/public                                                                                                                             nitro 2:19:48 PM
ℹ Building Nitro Server (preset: node-server)    
Could not load /path-to-project/node_modules/@heroicons/vue/20/solid/esm/index.js.js: ENOENT: no such file or directory, open '/path-to-project/node_modules/@heroicons/vue/20/solid/esm/index.js.js'

解决方案 #

1. 直接导入具体图标文件 #

绕过入口文件的路径解析问题，改为直接引用单个图标文件：

<script setup>
// 替换原导入方式：import { XIcon } from '@heroicons/vue/20/solid'
import XIcon from '@heroicons/vue/20/solid/XIcon.vue'
</script>

2. 配置Nitro别名修正错误路径 #

在nuxt.config.ts中添加别名映射，强制修正错误的路径指向：

export default defineNuxtConfig({
  nitro: {
    resolve: {
      alias: {
        '@heroicons/vue/20/solid/esm/index.js.js': '@heroicons/vue/20/solid/esm/index.js',
        '@heroicons/vue/24/outline/esm/index.js.js': '@heroicons/vue/24/outline/esm/index.js',
        // 根据你使用的Heroicons尺寸、风格补充对应规则
      }
    }
  }
})

3. 调整Nuxt构建的模块解析规则 #

修改nuxt.config.ts的build配置，明确扩展名解析优先级并指定Heroicons的ESM入口：

export default defineNuxtConfig({
  build: {
    extend(config) {
      config.resolve.extensions = ['.vue', '.js', '.mjs', '.json']
      config.resolve.alias['@heroicons/vue/20/solid'] = require.resolve('@heroicons/vue/20/solid/esm/index.js')
    }
  }
})

4. 降级Heroicons版本 #

部分新版本Heroicons的ESM导出配置与Nuxt3 Nitro存在兼容性问题，尝试降级到稳定版本：

npm uninstall @heroicons/vue
npm install @heroicons/vue@2.0.18

原因分析 #

该问题源于Nuxt3的Nitro构建器在解析Heroicons包package.json中的exports字段时，错误地为ESM入口追加了多余的.js后缀，导致路径指向不存在的index.js.js文件。Vue3环境无此问题是因为其构建器的模块解析逻辑与Nitro不同。

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