0.378.0 introduced a hydration bug that can be seen when using nextjs or remix - Githubissues

lucide-icons / lucide

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

https://lucide.dev

ISC License

8.94k stars 380 forks source link

0.378.0 introduced a hydration bug that can be seen when using nextjs or remix #2137

Open roger-tbg opened 1 week ago

roger-tbg commented 1 week ago

Package

[ ] lucide
[ ] lucide-angular
[ ] lucide-flutter
[ ] lucide-preact
[X] lucide-react
[ ] lucide-react-native
[ ] lucide-solid
[ ] lucide-svelte
[ ] lucide-vue
[ ] lucide-vue-next
[ ] Figma plugin
[ ] source/main
[ ] other/not relevant

Version

0.378.0

Can you reproduce this in the latest version?

[X] Yes
[ ] No

Browser

[X] Chrome/Chromium
[ ] Firefox
[ ] Safari
[ ] Edge
[ ] iOS Safari
[ ] Opera
[ ] Other/not relevant

Operating system

[ ] Windows
[ ] Linux
[X] macOS
[ ] ChromeOS
[ ] iOS
[ ] Android
[ ] Other/not relevant

Description

when updating from 0.372.0 to 0.378.0 i'm starting to see these in the console using ANY lucide icons that do not provide an extra className:

Steps to reproduce

Using nextjs or remix, just add any icon:

this will result in: Warning: Prop className did not match. Server: "lucide lucide-line-chart " Client: "lucide lucide-line-chart"

(note the extra space)

downgrading to 0.372.0 made this go away.

Checklist

[X] I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)