hydration failed
Unanswered
Britannia Petite posted this in #help-forum
Britannia PetiteOP
so what im doing is using fontawesome's cdn script for all icons
(root layout)
and im using the icons like this:
(root layout)
<Script defer src="https://cdn..../fa-all.min.js" />and im using the icons like this:
{badges
.sort((a, b) => a.order - b.order)
.filter((badge) => badge.visible)
.slice(0, 6)
.map((userBadge) => (
<div key={userBadge.id} className="group relative">
{/* Badge Icon */}
<div className="w-6 h-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<i
className={`${userBadge.iconName} fa-solid fa-lg`}
suppressHydrationWarning
></i>
</div>
{/* Hover tooltip */}
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-base-content text-base-100 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
{userBadge.name}
</div>
</div>
))}20 Replies
Britannia PetiteOP
the issue is
that the i becomes a svg
i think
and idk how can i fix this
@Britannia Petite so what im doing is using fontawesome's cdn script for all icons
(root layout)
` <Script defer src="https://cdn..../fa-all.min.js" />`
and im using the icons like this:
ts
{badges
.sort((a, b) => a.order - b.order)
.filter((badge) => badge.visible)
.slice(0, 6)
.map((userBadge) => (
<div key={userBadge.id} className="group relative">
{/* Badge Icon */}
<div className="w-6 h-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-200">
<i
className={`${userBadge.iconName} fa-solid fa-lg`}
suppressHydrationWarning
></i>
</div>
{/* Hover tooltip */}
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-base-content text-base-100 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
{userBadge.name}
</div>
</div>
))}
Use https://docs.fontawesome.com/v5/web/use-with/react instead. That method is for fontawesome usage in raw html only
Britannia PetiteOP
alr
but idk if it will work
i had pro and i still have access to the files
but i dont think i have access to their packages
The cause of the hydration error is that, the script scans the whole page and replaces any <i> with the svg equivalent, but react hydration doesn’t like that.
I won’t comment on the legality of using FA pro after license expiry because I’m not a lawyer, but if I were you I would first use <i>, then inspect elements to retrieve the actual <svg> code, then put that <svg> in some components/icons.tsx file, and use that instead of <i>
I won’t comment on the legality of using FA pro after license expiry because I’m not a lawyer, but if I were you I would first use <i>, then inspect elements to retrieve the actual <svg> code, then put that <svg> in some components/icons.tsx file, and use that instead of <i>
if you had a sub
you have a perpetual license
where you can use their license
but you lose access to pro npm packages
and kits
and so on..
@joulev The cause of the hydration error is that, the script scans the whole page and replaces any <i> with the svg equivalent, but react hydration doesn’t like that.
I won’t comment on the legality of using FA pro after license expiry because I’m not a lawyer, but if I were you I would first use <i>, then inspect elements to retrieve the actual <svg> code, then put that <svg> in some components/icons.tsx file, and use that instead of <i>
Britannia PetiteOP
that doesn't sound like a cool fix lmao
well not much else i can do about it. it doesn't sound cool because it isn't. the way to use FA in react is via its react package. you have noticed the way to use most things in react is to use the react package not by a <script>