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

Answer 1

This will resolve you problem.

npm i @heroicons/react