fix: temporally suppress activity.id hydration mismatch

daangn · Jan 27, 2025 · 3827bf5 · 3827bf5
1 parent 19f57fc
commit 3827bf5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx b/packages/stackflow/src/primitive/AppScreen/useAppScreen.tsx
@@ -37,13 +37,14 @@ export function useAppScreen(props: UseAppScreenProps) {
       activity,
       stateProps,
       activityProps: elementProps({
-        id: activity?.id,
         "data-part": "activity",
         "data-activity-type": "full-screen",
         ...activityProps,
         ...stateProps,
         "data-activity-id": activity?.id,
         style: zIndexStyle,
+        // FIXME: @stackflow/react should prevent activity.id hydration mismatch; this is temporal fix.
+        suppressHydrationWarning: true,
       }),
       dimProps: elementProps({
         "data-part": "dim",

diff --git a/packages/stackflow/src/primitive/private/useTopActivity.ts b/packages/stackflow/src/primitive/private/useTopActivity.ts
@@ -20,11 +20,7 @@ export function useTopActivity() {
   useEffect(() => {
     if (!topId) return;
 
-    const el = document.getElementById(topId);
-    if (!el) {
-      throw new Error(`Cannot find the top activity element with id: ${topId}`);
-    }
-
+    const el = document.querySelector<HTMLElement>(`[data-activity-id="${topId}"]`);
     setTopEl(el);
   }, [topId]);