Nuxt 3 error: Failed to resolve component

ynechaev commented 10 months ago

After following the docs and installing "@heroicons/vue": "^2.0.18" in my Nuxt 3 project, I get the following error:

[Vue warn]: Failed to resolve component: BeakerIcon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Icon is not rendered and logs contain the following error in addition to the above:

[Vue warn]: Hydration node mismatch:
- Client vnode: BeakerIcon 
- Server rendered DOM: <!---->  
  at <LeftMenu> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/" vnode= Object route= Object  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <NuxtLayoutProvider layoutProps= Object key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>

I tried adding heroicons into transpiler build options, but it didn't help to resolve this issue:

  build: {
    transpile: ['@heroicons/vue'],
  },

Here is my package.json contents:

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@types/node": "^18.17.3",
    "autoprefixer": "^10.4.15",
    "nuxt": "^3.6.5",
    "postcss": "^8.4.27",
    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
    "@firebase/app-types": "^0.9.0",
    "@heroicons/vue": "^2.0.18",
    "firebase": "^10.1.0",
    "firebase-admin": "^11.10.1",
    "firebase-functions": "^4.4.1",
    "lru-cache": "^10.0.1",
    "nuxt-vuefire": "^0.2.13",
    "vuefire": "^3.1.13"
  }
}

ynechaev commented 10 months ago

I checked my older Nuxt 3 project and version "@heroicons/vue": "v1" seems to be working (although still producing hydration warnings and import is slightly different with no size part in the path).

reinink commented 10 months ago

Hey! Do you mind sharing a minimal reproduction of this issue as a Git repo so that we can easily reproduce the problem on our end? Thanks!

reinink commented 10 months ago

Also, just a follow up on this, generally this warning means that the component has not been imported properly (or alternatively, globally registered). Here's an example from the readme:

<template>
  <div>
    <BeakerIcon class="h-6 w-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>

Also, just in case, if you're not using <script setup>, you'll need to also register this component:

<template>
  <div>
    <BeakerIcon class="h-6 w-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script>
import { BeakerIcon } from '@heroicons/vue/24/solid'

export default {
  components: { BeakerIcon },
}
</script>

Let me know if that helps 👍

ynechaev commented 10 months ago

Adding components export solved the issue, thanks!

reinink commented 10 months ago

Great, glad you got it figured out 🤙

tailwindlabs / heroicons

Nuxt 3 error: Failed to resolve component #1050