How to fix Module not found: Can't resolve '@heroicons/react/solid' in react app?

Question

I am following this brilliant post to learn react. However, some essential bits are missing.

When I open the app in the browser I get the error

./src/components/Navbar.js Module not found: Can't resolve '@heroicons/react/solid'

Apparently, I am missing a module. I tried to install it but nothing helped so far.

I tried:

npm install heroicons-react

npm install @react-icons/all-files --save

npm install @iconify/icons-heroicons-solid

npm install @heroicons/vue

The folder structure looks like:

project
|
|-package.json
|-node_modules
|-homepage
  |-node_modules
  |-package_json
  |-src
  |-public
  |-README.md

I tried the to execute the commands in the project directory and the homepage directory. Not sure which one I should use.

The code in question in Navbar.js looks like:

import { ArrowRightIcon } from "@heroicons/react/solid";

Begird

Try npm install @heroicons/react – Caro

Does it matter where I execute that command? – Begird

In the root of your project – Caro

That worked. Looks quite obvious retrospectively. – Begird

I always does in the end :) – Caro

Answer 1

This will resolve you problem.

npm i @heroicons/react

Blatt

Answer 2

For anyone recently having trouble, you need to:

import {} from '@heroicons/react/24/outline'

24 or 20 are the original sizes of icon as specified on heroicons site

Bannockburn

The maintainers pushed out a big update recently, so adding the size fixes the issue. Thanks for your concise reminder! – Racoon

This is the only solution that works for me in a React/Next 13 project. All other solutions here are citing the documentation but the documentation does not seem correct/updated for TypeScript – Goodsized

Thanks so much! I had been trying to find a solution for this for so long. – Hoxie

Answer 3

My friends, if you want to use heroicons V2 with TypeScript, just make sure that you are using the right path, just like the below:

import {UserIcon, Bars3Icon} from "@heroicons/react/24/solid"

There are 24 and 20 folders inside the @heroicons/react/, for TypeScript, you should use those folders.

Dann

Answer 4

This question is already resolved and I just wanted to add a few more things for newcomers. heroicons have clear documentation on GitHub.

React: First, install @heroicons/react from npm:

npm install @heroicons/react

Now each icon can be imported individually as a React component:

import { BeakerIcon } from '@heroicons/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

Vue Note that this library currently only supports Vue 3.

First, install @heroicons/vue from npm:

npm install @heroicons/vue

Now each icon can be imported individually as a Vue component:

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

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

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

Teteak

It doesn't work for Typescript – Charlatan

They are in the @heroicons/react/solid and @heroicons/react/outline folders. Importing specific folder item should work in TypeScript :) – Teteak

I ended up using react-icons, but I will take tah into account. Thanks !! – Charlatan

@Charlatan try this for typescript: '@heroicons/react/24/outline'. 24 or 20 are the original sizes of icon as specified on heroicons site. – Bannockburn

Answer 5

Downgrade to 1.0.6 solved it for me

yarn add @heroicons/[email protected]

Dikdik

Answer 6

Maintainers has released an update recently and it's messing up the imports used in previous version. I wish they could make the release a bit more easier to adapt on consumer side.

Anyway, you now need to define the sizes too in the import statements.

Previous Version import:

import {} from '@heroicons/react/outline'

import {} from '@heroicons/react/solid'

Latest version import:

import {} from '@heroicons/react/24/outline'

import {} from '@heroicons/react/20/solid'

Snigger

Answer 7

It could be because the installed version is v2 heroicons. Try installing heroiconsv1.

npm install heroicons-react

Abrasive

for installing v1 npm i heroicons/react@v1 – Provinciality

Answer 8

I had the same issue when installing @heroicons/react on nextjs, managed to resolve the issue by installing the module as a devDependencies.

Install it as below:

npm i -D  @heroicons/react

This will fix the module and the type error when using the modules

@heroicons/react/24/outline and @heroicons/react/20/solid.

Giorgio

Works for me.. on nextjs13 – Opheliaophelie

thank you -- this helped me on nextjs too – Coltson

Answer 9

After installing with:

npm install @heroicons/react

use

npm audit fix --force

Prelacy

Answer 10

test this command npm install heroicons-react or add

"@hookform/resolvers": "^0.1.0" 

to your package.json

Tafilelt

Answer 11

If your codebase imports directly from @heroicons/react/solid, you are probably trying to import from Heroicons v1, but you have Heroicons v2 installed.

Use this cmd:

npm install @heroicons/react@v1

Italia

Answer 12

Make sure the @heroicons/react package is installed. You can do this by running the following command in your terminal:

npm install @heroicons/react

Millar

Answer 13

you can find icon names for react to add in {} here:

https://unpkg.com/browse/@heroicons/[email protected]/24/outline/

Reverberation

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Blowbyblow

Answer 14

You probably have newer version (2) but you need v1. just happened to me just now. I had to uninstall v2 and use

npm install @heroicons/react@v1

this worked for me.

Seavey

@MohammadFarhadi nailed it above, it's easy to migrate to version 2, don't be lazy just add 20 or 24. read the docs, v2 explains breaking changes – Autonomic

Answer 15

If you are coding in React, You only need to install React library. @heroicons/vue is specific to vue framework and others libraries are also unnecessary.

Run this command at the root of your project

npm install @heroicons/react

Now, in your Navbar.js import ArrowRightIcon. There are two versions 24 and 20.

24 is standard 24*24 icons. 20 is mini 20*20

import { ArrowRightIcon } from "@heroicons/react/24/solid";

Countryfied

Answer 16

npm i @heroicons/react --legacy-peer-deps

If all other methods fail, use this it will definitely work.

Idiopathy

Answer 17

Do these steps and it will fix the issue, I believe the thread is quite old so the answers are not updated with latest updates on the dependency -

Install Heroicons Package: Run the following command to add the Heroicons library to your project:

npm install @heroicons/react

For Yarn

yarn add @heroicons/react

# Step 1: Navigate to your projects directory

cd path/to/your/homepage

# Step 2: Install the required Heroicons package

npm install @heroicons/react

# Note: After installation, ensure your import statement in Navbar.js looks like this:

import { ArrowRightIcon } from "@heroicons/react/24/solid";

# Step 4: Restart your development server to apply changes

npm start

OR 

yarn start

Hope this answer helps

Ariadne