Directory import 'PATH_TO_PRJECT/.output/server/node_modules/@heroicons/vue/outline' is not supported resolving ES modules imported from PATH_TO_PRJECT/.output/server/chunks/app/server.mjs

[bynicodevelop]

Hello,

I'm testing NuxtJS 3 with @heroicons/vue/outline. (Version : "@heroicons/vue": "^1.0.5")

When I build the project to test it on firebase emulator (hosting, cloud functions)

I have the following error:

Directory import 'PATH_TO_PRJECT/.output/server/node_modules/@heroicons/vue/outline' is not supported resolving ES modules imported from PATH_TO_PRJECT/.output/server/chunks/app/server.mjs
> Did you mean to import @heroicons/vue/outline/index.js?
> at new NodeError (node:internal/errors:371:5)
> at finalizeResolution (node:internal/modules/esm/resolve:412:17)
> at moduleResolve (node:internal/modules/esm/resolve:932:10)
> at defaultResolve (node:internal/modules/esm/resolve:1044:11)
> at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
> at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
> at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
> at link (node:internal/modules/esm/module_job:75:36)

I use this library in a .vue file as follows:

<template>
<div>
// code...
<MenuIcon class="h-6 w-6" aria-hidden="true" />
// code...
</div>
</template>

<script setup lang="ts">
import { MenuIcon, XIcon } from "@heroicons/vue/outline";
</script>

Did you have this problem ?

Thanks

[reinink]

Hey, this looks like a duplicate of #564. Closing in favor of that issue.

That said, it looks like a workaround is to append /index.js to the end of the import:

import { MenuIcon, XIcon } from "@heroicons/vue/outline/index.js";