fix(frontend): add "use client" directive to Next.js 15 providers (#83)#88
Open
teddylee777 wants to merge 1 commit into
Open
fix(frontend): add "use client" directive to Next.js 15 providers (#83)#88teddylee777 wants to merge 1 commit into
teddylee777 wants to merge 1 commit into
Conversation
## What Changed
- Added `"use client";` directive at line 1 of 4 provider files under `frontend/src/providers/`:
- `Settings.tsx`
- `AssistantConfig.tsx`
- `Stream.tsx`
- `Thread.tsx`
- Each file receives the directive followed by a blank-line separator; all existing imports, hooks, JSX, and logic are untouched.
## Root Cause
The 4 provider components declare React hooks (`useState`, `useEffect`, `useCallback`, `useMemo`, `useRef`) at module scope and in `Settings.tsx` also touch client-only browser APIs (`document.documentElement`, `window.matchMedia`, `localStorage`). They are currently safe only because every call site lives inside a client component tree (`MainLayoutClient.tsx`, `ChatContent.tsx` both declare `"use client"`). Any future refactor that hoists one of these providers into a Server Component would fail at build time with a Next.js 15 RSC boundary error. The directive converts this latent fragility into a defensive, self-documenting boundary.
## Test Plan
- [x] `head -1 frontend/src/providers/{Settings,AssistantConfig,Stream,Thread}.tsx` → `"use client";`
- [x] `cd frontend && pnpm lint` → ✔ No ESLint warnings or errors
- [x] `cd frontend && pnpm exec tsc --noEmit` → exit 0
- [x] `cd frontend && pnpm build` → all 27 routes compile successfully
- [x] `git diff --stat` shows exactly 4 files changed, +8/-0
## References
Closes #83
4 tasks
There was a problem hiding this comment.
Pull request overview
Adds explicit Next.js Client Component boundaries to provider modules to prevent future RSC boundary errors (Issue #83) if these hook/browser-API-using providers are ever imported from a Server Component.
Changes:
- Add
"use client";directive to four provider modules underfrontend/src/providers/. - Make the client-only intent of these providers explicit/defensive for Next.js 15 RSC compliance.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| frontend/src/providers/Settings.tsx | Adds "use client"; at the top to declare client boundary for hook + browser API usage. |
| frontend/src/providers/AssistantConfig.tsx | Adds "use client"; to ensure hook-based provider is always treated as a Client Component. |
| frontend/src/providers/Stream.tsx | Adds "use client"; to enforce client boundary for stream/hooks-based provider. |
| frontend/src/providers/Thread.tsx | Adds "use client"; to enforce client boundary for hook-based thread provider. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
컨텍스트 블록
요약
frontend/src/providers/아래 4개 provider 파일 (Settings.tsx, AssistantConfig.tsx, Stream.tsx, Thread.tsx)의 맨 위에"use client";지시문 추가"use client";라인 추가 (한 줄 + 공백 라인)동기 / 배경
문제 정의
4개의 provider 컴포넌트가 React hooks와 browser API를 사용하고 있음. 현재 모든 call site가 client component 범위 내에 있어서 작동하지만, 향후 누군가 이 providers를 Server Component에서 호출하도록 refactor할 경우 Next.js 15에서 RSC 경계 오류가 발생함.
트리거
Issue #83에서 보고된 Next.js 15 RSC compliance 점검
이전 상태
4개 provider: 명시적 client 경계 없음, call site 의존성으로만 안전
변경 사항
frontend/src/providers/Settings.tsx"use client";추가frontend/src/providers/AssistantConfig.tsx"use client";추가frontend/src/providers/Stream.tsx"use client";추가frontend/src/providers/Thread.tsx"use client";추가테스트 계획
head -1 frontend/src/providers/{Settings,AssistantConfig,Stream,Thread}.tsx"use client";로 시작cd frontend && pnpm lintcd frontend && pnpm exec tsc --noEmitcd frontend && pnpm buildgit diff --stat관련 이슈
Closes #83
체크리스트
type/description)