OpenCut-app / OpenCut-app/OpenCut

[BUG] SSR Hydration bug after download dev setup on local

Open
#618 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
89.8k
Forks
8.9k
PR merge metrics
No merged PRs in 30d

Description

Platform

Windows 11

Browser

Chrome Canary 142.0.7436.0 (Official Build) canary (64-bit)

Current Behavior

I have installed I run bun run db:migrate and after it, I run the server
but I have seen the bug in dev tool of next. Where was written, Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
in file src\app\page.tsx (16:7) @ Home

And the screenshot with Error callback and maybe is because dont load service worker

Image Image Image
Expected Behavior

Update: I find where was maybe error is components\theme-toggle.tsx
22,13: {theme === "dark" ? "Light" : "Dark"}

Recurrence Probability

Always

Steps To Reproduce
  1. Run in app/page.tsx
  2. Go to Header Component
  3. See what can happen in this component
  4. wrote test service worker maybe it fixed this
  5. Thinking where problem more deep what can happen with hydration

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue after running bun run db:migrate and starting the local server, then inspect src/app/page.tsx, the Header component, and components/theme-toggle.tsx. Compare the server and client-rendered theme-toggle output and check the reported service-worker behavior. Done means the local setup no longer reports a hydration mismatch in Chrome Canary.

Written by the indexing model from the issue text.

Assessment

Tech stack
bun, nextjs, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.