From a8ad046254880d4aa090feb96b88909fc537cdb4 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Mon, 26 Jan 2026 21:41:22 -0500
Subject: [PATCH] fix(RecordButton): Fix temporal dead zone error breaking
 Dashboard

Move stopRecording callback definition before startRecording to fix
'Cannot access stopRecording before initialization' ReferenceError.

The issue occurred because startRecording referenced stopRecording in
both its function body (for maxDuration auto-stop) and its dependency
array, but stopRecording was defined after startRecording. JavaScript's
temporal dead zone prevents accessing const/let variables before their
declaration, even within useCallback closures.

This bug prevented the Dashboard example page and any component using
RecordButton from rendering in Storybook.
---
 src/components/RecordButton/RecordButton.tsx | 34 ++++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/RecordButton/RecordButton.tsx b/src/components/RecordButton/RecordButton.tsx
index 77c07e5..1e4fd59 100644
--- a/src/components/RecordButton/RecordButton.tsx
+++ b/src/components/RecordButton/RecordButton.tsx
@@ -261,6 +261,23 @@ function RecordButton({
     };
   }, []);
 
+  const stopRecording = React.useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+    }
+
+    if (
+      mediaRecorderRef.current &&
+      mediaRecorderRef.current.state !== 'inactive'
+    ) {
+      mediaRecorderRef.current.stop();
+    }
+
+    if (streamRef.current) {
+      streamRef.current.getTracks().forEach((track) => track.stop());
+    }
+  }, []);
+
   const startRecording = React.useCallback(async () => {
     if (disabled || isRecording || isProcessing) return;
 
@@ -327,23 +344,6 @@ function RecordButton({
     stopRecording,
   ]);
 
-  const stopRecording = React.useCallback(() => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-    }
-
-    if (
-      mediaRecorderRef.current &&
-      mediaRecorderRef.current.state !== 'inactive'
-    ) {
-      mediaRecorderRef.current.stop();
-    }
-
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach((track) => track.stop());
-    }
-  }, []);
-
   const handleClick = React.useCallback(() => {
     if (isRecording) {
       stopRecording();