Hydration issue on code setup

[sanju-developer]

📦 部署环境

Other

📦 部署模式

客户端模式(lobe-chat 镜像)

📌 软件版本

Rocky linux 8.10 (amazon workspace) - Version 3.32.2

💻 系统环境

Other Linux

🌐 浏览器

Chrome

🐛 问题描述

I did local setup but some hydration error from Next.js is coming. As soon as i start running on chrome browser hydration error appears and these are not few coming in almost all the components.

📷 复现步骤

git clone https://github.com/lobehub/lobechat.git
cd lobechat
pnpm install
pnpm dev

now open in broswer localhost and you will see the list of errors

🚦 期望结果

It should simply run the app.

📝 补充信息

No response

[lobehubbot]

👀 @sanju-developer

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[dosubot]

Hello @sanju-developer! 👋 I'm Dosu, your friendly bot here to help you tackle bugs, answer questions, and guide you as you become a contributor. I'm here to assist you while you wait for a human maintainer. Let's get started!

The hydration error you're encountering seems to be related to the showCitations prop being passed incorrectly to a DOM element. This issue arises because React does not recognize showCitations as a valid DOM attribute, which leads to a warning or error during the hydration process.

To resolve this issue, you should ensure that the showCitations prop is not directly passed to a DOM element. Instead, it should be used within a React component where it can be handled appropriately. Here's what you can do:

1. Check the ChatItem Component: Ensure that the showCitations prop is not being directly applied to a native HTML element. It should be used within the logic of the component, possibly affecting rendering decisions or passed to other React components that understand this prop.

2. Modify the Prop Usage: If showCitations is being passed to a native element, consider using it to conditionally render parts of the component or pass it to a child component that can handle it correctly.

3. Review the Component Logic: Look at the logic around line 230 in src/features/Conversation/components/ChatItem/index.tsx to see how showCitations is being used. Ensure that it is not being spread onto a DOM element.

Additionally, the general hydration error indicating a mismatch between server-rendered and client-rendered HTML could be due to differences in the rendering logic between server and client. Check for:

• Consistent Logic: Ensure that any logic affecting rendering is consistent between server and client. Avoid using non-deterministic functions like Date.now() or Math.random() during rendering.

• Data Consistency: Make sure that any data used during rendering is the same on both server and client.

• HTML Structure: Verify that the HTML structure is valid and consistent between server and client.

By addressing these points, you should be able to resolve the hydration issues you're facing.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[sanju-developer]

@dosu even this is fresh clone we should not have these error to run. Also there are not few errors many errors related to hydration. can we have any new version where these will get fixed so if I do fresh clone and run it will run without any warnings and errors,

could you please assign this bug to any maintainer of the repo?

[dosubot]

A maintainer has already been looped in.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[sanju-developer]

Thanks waiting for someone to comment on this with solution or any other guidance.

[sanju-developer]

@canisminor1990 @arvinxx can you please check with team if there is any way where I can simply clone the repo and on doing installing step I can see
working version of lobe chat on browser?