From 845a8e0ae6820786f72ee4385e9543ad2651c316 Mon Sep 17 00:00:00 2001 From: Christian Vidal Wolf Date: Mon, 16 Mar 2026 13:04:42 +0100 Subject: [PATCH] fix: resolve black screen caused by React hooks violation in WaterfallModal Move useMemo before early return in WaterfallModal to comply with Rules of Hooks. Wrap App with ErrorBoundary so future render crashes show an error panel instead of a silent black screen. Co-Authored-By: Claude Sonnet 4.6 --- components/mkt/WaterfallModal.tsx | 9 +++++---- index.tsx | 5 ++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/components/mkt/WaterfallModal.tsx b/components/mkt/WaterfallModal.tsx index 61cdb34..ddf31d3 100644 --- a/components/mkt/WaterfallModal.tsx +++ b/components/mkt/WaterfallModal.tsx @@ -11,13 +11,12 @@ interface WaterfallModalProps { } export const WaterfallModal: React.FC = ({ product, includeCOGS, onClose }) => { - if (!product) return null; - const data = useMemo(() => { + if (!product) return []; const metrics = calculateProductMetrics(product, includeCOGS); - + let currentTotal = product.grossSales; - + const steps = [ { name: 'Gross Sales', value: product.grossSales, isTotal: true, color: '#6366f1' }, // Indigo { name: 'PPC', value: -product.ppcSpend, isTotal: false, color: '#ef4444' }, // Rose @@ -67,6 +66,8 @@ export const WaterfallModal: React.FC = ({ product, include })); }, [product, includeCOGS]); + if (!product) return null; + const metrics = calculateProductMetrics(product, includeCOGS); return ( diff --git a/index.tsx b/index.tsx index 6ca5361..0001c9a 100644 --- a/index.tsx +++ b/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; +import ErrorBoundary from './components/ErrorBoundary'; const rootElement = document.getElementById('root'); if (!rootElement) { @@ -10,6 +11,8 @@ if (!rootElement) { const root = ReactDOM.createRoot(rootElement); root.render( - + + + ); \ No newline at end of file