Help! My project won’t compile when I run npm start. Here’s the error I’m getting:
Compilation failed.
Can't find module: Unable to resolve '@fortawesome/free-brands-svg-icons' in '/srv/stable/CardioJS/src/components'
ERROR in ./src/components/Contact.jsx 10:0-64
Can't find module: Unable to resolve '@fortawesome/free-brands-svg-icons' in '/srv/stable/CardioJS/src/components'
webpack compiled with 1 error
I checked my Contact.jsx file, and these are the imports:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMapPin, faMailBulk } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
I’ve tried removing and reinstalling node_modules, using different npm versions (9.2.0, 10.8.2, 11.1.0), and checking my dependencies. Nothing seems to work. The app also had routing issues before.
My App.js looks like this:
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import WorldMap from './components/WorldMap';
import DiseaseStats from './components/StatsDrop';
import NavBar from './components/NavBar';
import PageHeader from './components/PageHeader';
import Info from './pages/Info';
import Europe from './pages/Europe';
import ContactUs from './components/ContactUs';
import America from './pages/America';
function App() {
return (
<BrowserRouter>
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/info" element={<Info />} />
<Route path="/europe" element={<Europe />} />
<Route path="/contact" element={<ContactUs />} />
<Route path="/america" element={<America />} />
</Routes>
<PageFooter />
</div>
</BrowserRouter>
);
}
I’m at my wit’s end here. Any ideas on what could be causing this?
I’ve run into similar issues before, and it’s usually related to package management. Have you tried clearing your npm cache? Sometimes cached dependencies can cause conflicts. Run npm cache clean --force and then npm install again.
Also, double-check your package.json to ensure all @fortawesome packages are listed correctly. Sometimes, the peerDependencies aren’t automatically installed. You might need to manually install @fortawesome/fontawesome-svg-core and @fortawesome/react-fontawesome as well.
If that doesn’t work, try creating a new project and copying your source files over. This can help isolate if it’s a project configuration issue or a code-related problem.
Lastly, make sure your node version is compatible with all your packages. I’ve seen weird conflicts arise from mismatched versions. You can use nvm to easily switch between node versions if needed.
Hope this helps! Let me know if you need any clarification on these steps.
Have you checked if the @fortawesome/free-brands-svg-icons package is actually installed in your project? Sometimes npm can miss installing specific packages, especially if they’re not explicitly listed in your package.json.
Try running ‘npm list @fortawesome/free-brands-svg-icons’ to see if it’s installed. If it’s not there, you’ll need to install it manually with ‘npm install @fortawesome/free-brands-svg-icons’.
Also, make sure your package.json includes all the necessary @fortawesome packages. Sometimes peer dependencies don’t get installed automatically.
If that doesn’t work, you might want to look into your webpack configuration. There could be an issue with how it’s resolving modules. Check if you have any custom resolve settings that might be interfering with module lookup.
Lastly, if you’re using a monorepo or a non-standard project structure, ensure your import paths are correct. Sometimes relative paths can cause issues in complex project setups.
hey mate, sounds like a package issue. have u tried running npm install @fortawesome/free-brands-svg-icons specifically? sometimes npm misses stuff. also, check ur package.json to make sure its listed there. if all else fails, try deleting node_modules and package-lock.json, then npm install again. Good luck!