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

user_5452008 0
Viewed 16840

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";
npm create-react-app reactjs
6 Answers

This will resolve you problem.

npm i @heroicons/react
user_45032990

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>
user_65429430

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

npm install heroicons-react
user_198728180

Downgrade to 1.0.6 solved it for me

yarn add @heroicons/react@1.0.6
user_82918390

test this command npm install heroicons-react or add

"@hookform/resolvers": "^0.1.0"

to your package.json

user_125272600

After installing with:

npm install @heroicons/react

use

npm audit fix --force

user_121736460
Related