Uncaught Error: Cannot find module '@fortawesome/free-regular-svg-icons'

Question

I'm trying to use ReactJS with font-awesome but I am getting a module not found error. The files are in the npm modules folder so I'm not sure what is going wrong.

I have the following in my package.json:

{
  "name": "partner-portal",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4"
  }
}

I have run the following commands, and the libraries have been added to my npm_modules folder:

yarn add @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
yarn add @fortawesome/react-fontawesome@latest
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

But when I include it like this:

import { faBell } from "@fortawesome/free-regular-svg-icons"

function Form() {

    return(
        <div className='container w-[1000px] p-5 mx-auto border rounded-2xl'>
            <div className='flex flex-wrap'>
                <label className="mr-5">Name</label>
            </div>

            <div className='flex flex-row w-full justify-end'>
                <button className="pointer-events-auto ml-8 rounded-md bg-indigo-600 py-2 px-3 text-[0.8125rem] font-semibold leading-5 text-white hover:bg-indigo-500">
                    <FontAwesomeIcon icon={faBell} />
                    Save
                </button>
            </div>

        </div>
    )
}

export default Form;

I get the following error:

Uncaught Error: Cannot find module '@fortawesome/free-regular-svg-icons'
    webpackMissingModule bundle.js:214
    js bundle.js:214
    factory react refresh:6
    Webpack 11**

Can anyone tell me what Im doing wrong?

Edit:

I've moved on now and I'm trying to use ReactRouter, which I've installed using the following command npm i react-router. As you cas see from my updated package.json (above) I have react-dom, react-router, react-router-config, react-router-dom in there. I run npm install and get no problems. However when I try:

import {
    BrowserRouter as Router,
    Switch,
    Route,
} from "react-router"

I still get the same error. Uncaught Error: Cannot find module 'react-router' Again, the files are there in the node_modules folder. What am I doing wrong??!

Thoria

Could You please add link to the repo ? – Outcrop

Answer 1

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

I had a similar issue and solved it by running the above commands then I stopped the script and did npm start and the error was fixed. I hope this helps.

Zinfandel

Answer 2

First install "SVG Core" icons

npm i --save @fortawesome/fontawesome-svg-core

or

yarn add @fortawesome/fontawesome-svg-core

Then choice your prefer "icon package" (solid, brand, regular)

NPM:

# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

YARN

# Free icons styles
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

If dont doenst another step: https://fontawesome.com/docs/web/use-with/react/add-icons

If u are using docker. Restart container.

Font: https://fontawesome.com/docs/web/use-with/react/

Wallboard

Answer 3

You just need to install,

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Remove all others and use the below code,

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBell } from '@fortawesome/free-solid-svg-icons'

function App() {
    return (
        <>
            <FontAwesomeIcon icon={faBell} />
        </>
    )
}

Worked for me !!

Hyphenated

Im still getting the same error. I ran the commands you suggested above and I'm including and its not working. The app works fine without it, just can't seem to find the module for some reason. I'm also using tailwindcss, would that conflict at all? – Thoria

Also, I'm not sure how to remove others as you suggested. – Thoria

Delete all fortawesome related things from the package.json. Then delete node_modules folder. And then run npm install. Then follow the procedure in my answer. Everything will work fine. – Hyphenated

Delete ` "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-regular-svg-icons": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.2.0",` from package.json. – Hyphenated

If there is any conflicts with tailwindcss. You will get error while installing fortawesome modules. Let me know, If you get any error messages. – Hyphenated

Does this answer fixes your issue ? – Hyphenated

Sorry, No. I did exactly as you described, no error messages. Does it affect things because I'm running in side a docker container? – Thoria

No it wont happen. Are you getting the same error ? – Hyphenated

Unfortunately it's a private repo for work :( – Thoria

Okay no probs. Can you share your package.json file alone ? – Hyphenated

I've updated the question and put the most recent package.json in there (the top code segment). I've moved on to try and use ReactRouter, but I am getting the same error with that too (Cannot find module 'react-router') So obviously I have some fundemental problem with the way my modules are loaded. – Thoria

It is react-router-dom and not react-router. It is npm install react-router-dom. – Hyphenated

Answer 4

I had a similar issue where I had followed the steps on the site but kept getting errors.

The problem for me was that I installed the fontawesome dependencies in another terminal while my build was running as well so I didn't get any feedback.

On restarting the build after the errors, I finally got the feedback that the version of the dependency I installed was to recent for the version of react native I was using, I was also given a line of code to run to get the right version

Parthena

Answer 5

For me, this solution worked.

1. Delete @fortawesom folder inside node_modules
2. Install again by npm i if they are already in package.json

Thibaud

Answer 6

first install react icons

npm install react-icons --save

then test your icon

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
 render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}

for more icons go to

https://react-icons.github.io/react-icons/

Intangible

Answer 7

i don't konw why, but it's ok. I changed the default port 3000 to 3020 and the result was fine.

Movie

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Shortie