DEV Community

Athira P S
Athira P S

Posted on

โš›๏ธ React 19 + FontAwesome = broken? Here's why and how to fix it. ๐Ÿงต

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 ๐Ÿš€\

Top comments (0)