⚛️ React 19 + FontAwesome = broken? Here's why and how to fix it. 🧵

#javascript #programming #react #node

I ran into this while building an HR software project with React 19, Vite, Node.js and MongoDB.

🔴 The error:
"Invalid hook call" + "Cannot read properties of null (reading 'useId')"

🔍 3 things that were wrong:

1️⃣ Missing package
@fortawesome/react-fontawesome was never installed — only the core and icon packages were. Without it, there's no React component to render icons at all.

2️⃣ Wrong FA version
v7 of FontAwesome is the Pro version. If you're using free icons, you need v6.

3️⃣ React 19 compatibility
FA's older packages used React hooks internally. React 19 changed how hooks are registered, causing the null 'useId' crash.

✅ Correct setup for React 19:
npm install \
@fortawesome/react-fontawesome@latest \
@fortawesome/fontawesome-svg-core@^6.7.2 \
@fortawesome/free-solid-svg-icons@^6.7.2

🏗️ Project context:
Building a full-stack HR Management System — Employees, Attendance, Payroll, Leave Management — using React 19, Node.js, Express and MongoDB. Excited to share more soon!

Follow along if you're into full-stack builds 🚀\