fumadocs
fumadocs copied to clipboard
fuma-nama
className did not match
To Reproduce
This can be reproduced by cloning https://github.com/fuma-nama/next-docs-ui-template and running it. I'm also seeing this same warning when setting up Fuma on my own project and loading my docs.
The Fuma Template
My Own Project
seems like it's coming from an icon? I don't use lucide-search anywhere in my project.
Current vs. Expected behavior
I wouldn't expect warnings
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:35 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8103
Binaries:
Node: 18.17.0
npm: 10.5.0
Yarn: 1.22.19
pnpm: 8.6.2
Relevant Packages:
next: 14.0.4
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 5.3.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
UI, MDX
Additional context
No response
The warning on root html element is caused by next-themes, which is generally recommended to suppress. I'm uncertain of the svg one, I'll take a look tomorrow.
I noticed you are cloning next-docs-ui-template, It was the previous name of fumadocs and have already deprecated few months ago.
You can clone https://github.com/fuma-nama/fumadocs-ui-template.git instead, which is the template our CodeSandbox demo using.
I cannot reproduce the SVG hydration warning problem on my Macbook. It sounds like an upstream problem from lucide-react, could you share your lock file (via GitHub repo) to help me do further investigation? You can try cloning the new template first, perhaps it can be solved by upgrading dependencies.
I am following the getting started guide at https://fumadocs.vercel.app/docs/ui, and I get that same lucide-react error on the same SVG for the default template. It does appear to be a problem in lucide-react, but then it would make sense to downgrade the fumadocs dependency on the package to a version that works.
That's odd, Fumadocs upgrades dependencies regularly and the current version of fumadocs is using the latest release of lucide-react. It doesn't cause problems on CodeSandbox.
The default template doesn't include a lock file so that you can bring your own package manager. It also makes our release workflow faster by not generating a lock file. Hence, I might need a reproducible repository to have a deeper look into the problem.
This is what I'm getting from a new app generated with create-fumadocs-app, you can see except the warning from next-themes aforementioned, there's no warning about SVG.
It's interesting that you do not get the same SVG error. I believe it is related to the same bug in lucide-react that is referenced by this issue in their repository
And the nav UI uses the search icon from lucide-react here
With a dependency on a broken version of lucide-react
Am I missing something that would cause you not to get the same error?
Tested on [email protected]([email protected]) using pnpm
I'm uncertain of the reason tho. Could you provide a minimal reproducible example?
I tested it with those versions and am getting the same error. I am attaching a zip with a reproducible example. All I did was run pnpm create fumadocs-app to create it.
svg-error.zip
The example doesn't include a lock file, running it doesn't give me any SVG hydration warnings.
@fuma-nama You're right. After upgrading the lucide-react dependency to latest, the error disappears. I did not open this issue, but I agree that it's not an issue with this repository.
I'll closing this issue for now, for people who encountered this problem, make sure the lucide-react you've installed is the latest version!