개발자가 ReactFlow 기반 knowledge graph에서 edge가 렌더링되지 않는 버그를 수정하며, 2가지 원인(overflow 스타일과 React context)을 파악했다

Context

ReactFlow를 사용한 knowledge graph view에서 노드는 정상 렌더링되지만 edge(연결선)가 표시되지 않는 문제가 발생했다. 콘솔에 오류 메시지가 없었고, 노드는 정확한 위치에 배치되어 있었다.

Technical Solution

• overflow: hidden이 적용된 부모 div → overflow: clip으로 변경하여 SVG edge 레이어 클리핑 현상 해결
• overflow: clip은 시각적으로 content를 클리핑하면서 stacking context를 생성하지 않아서 SVG 레이어가 정상 렌더링됨
• Next.js dynamic()으로 비동기 로드되는 VideoKnowledgeGraph 컴포넌트에 ReactFlowProvider를 명시적으로 래핑함
• dynamic()의 비동기 chunk 로딩으로 ReactFlow context가 초기화되지 않을 수 있으므로, 부모 트리의 context 의존을 제거함

Impact

수치 기반 성능 변화 없음

Key Takeaway

overflow: hidden은 stacking context를 생성하는 부작용이 있고, dynamic() 사용 시 React context 초기화 순서가 보장되지 않으므로 명시적 provider 제공이 필요하다