Search code examples
nuxt.jstailwind-cssnuxt3.jsheroicons

Heroicons & Nuxt3 - fails to build (works on dev) with "could not load... index.js.js"

I am running a nuxt 3 app with tailwindcss and heroicons. I have added @heroicons/vue to my npm and the app works fine on npm run dev (all pages work properly and the icons are displayed as well).

Although, when I run npm run build (on different environments, including my local machine where npm run dev works fine) I get a weird error:

✔ 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'

I see the problem is in the ".js.js" in the file extension although I have not modified any of the node_modules files. Already tried to npm remove heroicons and add it again - no change.

The package works fine in the vuejs but fails on nuxt.

removed and added @heroicons/vue tried on another machine in another environment checked the package with vue3 (works well, fails on nuxt)

Solution

  • The case is now solved. I was going through every file of the project and I found that one of the components had wrongly imported the heroicon (no idea why it worked on dev though)

    changed

    import {ChevronDownIcon} from "@heroicons/vue/20/solid/index.js";

    to

    import {ChevronDownIcon} from "@heroicons/vue/20/solid";

    Sorry for that, case closed. I'm leaving this as someone might face the "js.js" issue in the future.