CODEWITHSUNDEEP
vue.jstailwind-cssheroicons
Adam
Adam

Reputation: 29079

Module not found: Error: Can't resolve '@heroicons/vue/24/outline'

I get the error message as soon as I add this reference in my vue component:

<script setup>
import { ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline'

I am using tailwindcss 3.1.8.

I have executed this:

npm install @headlessui/vue @heroicons/vue

I have version 1.0.6 of heroicons installed. Why is the icon not found?

Upvotes: 1

Views: 9592

Answers (2)

molavec
molavec

Reputation: 9127

I was using Typescript, so the error was slightly different.

Cannot find module '@heroicons/vue/24/outline' or its corresponding type declarations.ts(2307)

In Visual Studio the problem persists with Typescript. I solved adding types path in tsconfig.json.

{
  "compilerOptions": {
    ...
    "typeRoots": [
      "../../node_modules/@heroicons/**/*.d.ts"
    ]
  },
 ...
}

It probably is not resolve particular Javascript problem, but it can help anyone to work in Typescript and land in this answer.

Upvotes: 1

Adam
Adam

Reputation: 29079

Looks like heroicons 1.0.6 is outdated. Had to get version 2.0.* by calling

npm install @heroicons/vue@latest

Import of icons had to be changed from '@heroicons/vue/**' to '@heroicons/vue/24/*'

I also had to switch some old icons with new ones, as they may have been renamed or removed. New Icons may be found at https://unpkg.com/browse/@heroicons/[email protected]/24/outline/ (the page https://vue-hero-icons.netlify.app/ does not work as it still contains old ones)

Upvotes: 7

Related Questions