NextJs 14 className hydration bug.

[nandy1990]

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.446.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
• [X] Linux
• [ ] macOS
• [ ] ChromeOS
• [ ] iOS
• [ ] Android
• [ ] Other/not relevant

Description

When using "use client" className differs by trailing whitespace between server and client. Inside off createLucideIcon.js className gets joined together by following line 23:

className: ["lucide", lucide-${toKebabCase(iconName)}, className].join(" ")

so if className is empty you end up having a trailing space.

Console output in browser:

Warning: Prop className did not match. Server: "lucide lucide-euro " Client: "lucide lucide-euro" at svg...

Steps to reproduce

Any file with "use client" and rendering any icon without className specified leads to this warning/error

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.)

[bsimpson888]

Hello together, I face exactly the same bug. By trimming the resulting className string, the error is gone. Could someone please add the .trim() after the .join(" ") to this line.