CODEWITHSUNDEEP
reactjsnpmcreate-react-app
Soerendip
Soerendip

Reputation: 9165

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

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";

Upvotes: 23

Views: 83778

Answers (17)

GDS K S
GDS K S

Reputation: 103

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

Upvotes: 0

mojtaba
mojtaba

Reputation: 49

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

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

Upvotes: 1

cyberplus
cyberplus

Reputation: 1

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

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

Upvotes: 0

SAT77
SAT77

Reputation: 21

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

npm install @heroicons/react

Upvotes: 1

Meera Datey
Meera Datey

Reputation: 2030

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";

Upvotes: 0

Thivstan
Thivstan

Reputation: 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

Upvotes: 1

sdqworm
sdqworm

Reputation: 53

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.

Upvotes: 3

Mohammad Farhadi
Mohammad Farhadi

Reputation: 1492

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.

Upvotes: 10

Alexander Marquina
Alexander Marquina

Reputation: 9

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.

Upvotes: 0

Hritik Bakshi
Hritik Bakshi

Reputation: 121

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'

Upvotes: 5

Israel Ndou
Israel Ndou

Reputation: 261

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

Upvotes: 26

Bernardo
Bernardo

Reputation: 71

Downgrade to 1.0.6 solved it for me

yarn add @heroicons/[email protected]

Upvotes: 7

Mhmdnzr
Mhmdnzr

Reputation: 145

test this command npm install heroicons-react or add

"@hookform/resolvers": "^0.1.0"

to your package.json

Upvotes: 1

Sandra Sajeev
Sandra Sajeev

Reputation: 39

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

npm install heroicons-react

Upvotes: 4

فرامرز جاغوری
فرامرز جاغوری

Reputation: 21

After installing with:

npm install @heroicons/react

use

npm audit fix --force

Upvotes: 1

Md. Jamal Uddin
Md. Jamal Uddin

Reputation: 792

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>

Upvotes: 9

Jamal Basha
Jamal Basha

Reputation: 498

This will resolve you problem.

npm i @heroicons/react

Upvotes: 28

Related Questions