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...
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";
3 Answers
This will resolve you problem.
npm i @heroicons/react
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>
After installing with:
npm install @heroicons/react
use
npm audit fix --force
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
