diff --git a/PROBLEME_CALENDAR_WIDGET.md b/PROBLEME_CALENDAR_WIDGET.md new file mode 100644 index 0000000..6e0cf23 --- /dev/null +++ b/PROBLEME_CALENDAR_WIDGET.md @@ -0,0 +1,184 @@ +# Problème TypeScript : Block-scoped variable 'status' used before its declaration + +## Contexte du projet + +- **Framework** : Next.js 16.1.1 (App Router) +- **TypeScript** : Mode strict activé (`"strict": true` dans `tsconfig.json`) +- **Fichier concerné** : `components/calendar/calendar-widget.tsx` +- **Erreur** : `Type error: Block-scoped variable 'status' used before its declaration.` + +## Description du problème + +L'erreur TypeScript se produit à la ligne 33 du fichier `components/calendar/calendar-widget.tsx` : + +```typescript +export function CalendarWidget() { + const { data: session, status } = useSession(); // Ligne 25 - Déclaration + const [events, setEvents] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const { triggerNotification } = useWidgetNotification(); + const lastEventCountRef = useRef(-1); + + useEffect(() => { + console.log("Calendar Widget - Session Status:", status); // Ligne 33 - ERREUR ICI + // ... + }, [session, status, triggerNotification]); +} +``` + +**Erreur exacte :** +``` +./components/calendar/calendar-widget.tsx:33:54 +Type error: Block-scoped variable 'status' used before its declaration. +``` + +## Constat important + +Le code est **identique en structure** à `components/email.tsx` qui **compile sans erreur** : + +```typescript +// components/email.tsx - FONCTIONNE +export function Email() { + const { data: session, status } = useSession(); // Même déclaration + // ... autres hooks ... + + useEffect(() => { + if (status === 'authenticated') { // Même utilisation + loadAccounts(); + } + }, [status]); +} +``` + +## Ce qui a été testé + +### 1. Tentatives de solutions (toutes échouées) + +#### Tentative 1 : Déclaration dans le useEffect +```typescript +useEffect(() => { + const session = sessionHook.data; + const status = sessionHook.status; + // ... +}, [sessionHook.data, sessionHook.status, triggerNotification]); +``` +**Résultat** : Erreur `Block-scoped variable 'sessionHook' used before its declaration` + +#### Tentative 2 : Séparation de la destructuration +```typescript +const sessionResult = useSession(); +const session = sessionResult.data; +const status = sessionResult.status; +``` +**Résultat** : Même erreur avec `sessionResult` + +#### Tentative 3 : Ordre des hooks modifié +- Déplacer `useSession()` avant les autres hooks +- Déplacer `useSession()` après les autres hooks +**Résultat** : Même erreur + +#### Tentative 4 : Alignement avec email.tsx +Copie exacte de la structure de `email.tsx` qui fonctionne +**Résultat** : Même erreur + +### 2. Vérifications effectuées + +✅ **Pas de conflit de noms** : Aucune autre déclaration de `status` dans le fichier +✅ **Pas de cache** : + - `rm -rf .next` exécuté + - `rm -rf node_modules/.cache` exécuté + - Erreur persiste après nettoyage + +✅ **Fichier sur disque vérifié** : Le code est correct (pas de `sessionResult` ou autre) +```bash +sed -n '32,45p' components/calendar/calendar-widget.tsx +# Confirme que le code est correct +``` + +✅ **Comparaison avec email.tsx** : Structure identique, même ordre de déclaration + +✅ **Recherche dans le projet** : Aucune autre référence à `sessionResult` trouvée + +### 3. État actuel du code + +Le fichier `components/calendar/calendar-widget.tsx` contient : + +```typescript +"use client"; + +import { useState, useEffect, useRef } from "react"; +import { format, isToday, isTomorrow, addDays } from "date-fns"; +import { fr } from "date-fns/locale"; +import { CalendarIcon, ChevronRight } from "lucide-react"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import Link from "next/link"; +import { useSession } from "next-auth/react"; +import { useWidgetNotification } from "@/hooks/use-widget-notification"; + +type Event = { + id: string; + title: string; + start: Date; + end: Date; + isAllDay: boolean; + calendarId: string; + calendarName?: string; + calendarColor?: string; +}; + +export function CalendarWidget() { + const { data: session, status } = useSession(); // Ligne 25 + const [events, setEvents] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const { triggerNotification } = useWidgetNotification(); + const lastEventCountRef = useRef(-1); + + useEffect(() => { + console.log("Calendar Widget - Session Status:", status); // Ligne 33 - ERREUR + console.log("Calendar Widget - Session Data:", session); + + if (status === "loading") { + console.log("Calendar Widget - Session is loading"); + return; + } + + if (status !== "authenticated" || !session) { + console.log("Calendar Widget - Not authenticated, skipping fetch"); + setLoading(false); + return; + } + + // ... reste du code ... + + }, [session, status, triggerNotification]); + + // ... reste du composant ... +} +``` + +## Hypothèses + +1. **Bug TypeScript** : Problème d'analyse statique avec les hooks React dans ce contexte spécifique +2. **Incompatibilité de versions** : Possible problème entre Next.js 16.1.1 et TypeScript +3. **Analyse séquentielle** : TypeScript pourrait analyser le `useEffect` avant que la destructuration de `useSession()` soit complètement résolue + +## Informations techniques + +- **Next.js** : 16.1.1 +- **TypeScript** : Version dans `tsconfig.json` avec `"strict": true` +- **React** : Version via Next.js 16.1.1 +- **next-auth** : Utilisé pour `useSession()` + +## Question + +Pourquoi TypeScript signale-t-il que `status` est utilisé avant sa déclaration alors que : +1. `status` est déclaré ligne 25 +2. `status` est utilisé ligne 33 (dans un `useEffect` qui est déclaré après) +3. La même structure fonctionne dans `components/email.tsx` +4. Aucun conflit de noms n'existe +5. Les caches ont été nettoyés + +Quelle est la solution pour résoudre cette erreur TypeScript sans compromettre la structure du code qui fonctionne ailleurs dans le projet ? diff --git a/PROMPT_PROBLEME.txt b/PROMPT_PROBLEME.txt new file mode 100644 index 0000000..2551d16 --- /dev/null +++ b/PROMPT_PROBLEME.txt @@ -0,0 +1,39 @@ +PROBLÈME TYPESCRIPT - Next.js 16.1.1 + +Contexte : +- Next.js 16.1.1 (App Router), TypeScript strict mode +- Fichier : components/calendar/calendar-widget.tsx +- Erreur : "Block-scoped variable 'status' used before its declaration" ligne 33 + +Code problématique : +```typescript +export function CalendarWidget() { + const { data: session, status } = useSession(); // Ligne 25 - déclaration + const [events, setEvents] = useState([]); + // ... autres hooks ... + + useEffect(() => { + console.log("Status:", status); // Ligne 33 - ERREUR ICI + // ... + }, [session, status, triggerNotification]); +} +``` + +Constats : +✅ Même structure que components/email.tsx qui compile sans erreur +✅ Pas de conflit de noms (une seule déclaration de 'status') +✅ Caches nettoyés (.next, node_modules/.cache) +✅ Fichier vérifié sur disque - code correct +✅ Aucune autre référence à sessionResult/status trouvée + +Tentatives échouées : +1. Déclarer status dans useEffect → erreur avec sessionHook +2. Séparer destructuration → erreur avec sessionResult +3. Changer ordre des hooks → même erreur +4. Copier structure exacte de email.tsx → même erreur + +Question : +Pourquoi TypeScript signale "used before declaration" alors que status est déclaré ligne 25 et utilisé ligne 33, et que la même structure fonctionne dans email.tsx ? + +Solution recherchée : +Comment résoudre cette erreur TypeScript sans compromettre la structure du code qui fonctionne ailleurs ? diff --git a/components/calendar/calendar-widget.tsx b/components/calendar/calendar-widget.tsx index 49a7c77..5521d2e 100644 --- a/components/calendar/calendar-widget.tsx +++ b/components/calendar/calendar-widget.tsx @@ -22,7 +22,7 @@ type Event = { }; export function CalendarWidget() { - const { data: session, status } = useSession(); + const { data: session, status: sessionStatus } = useSession(); const [events, setEvents] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -30,15 +30,15 @@ export function CalendarWidget() { const lastEventCountRef = useRef(-1); useEffect(() => { - console.log("Calendar Widget - Session Status:", status); + console.log("Calendar Widget - Session Status:", sessionStatus); console.log("Calendar Widget - Session Data:", session); - if (status === "loading") { + if (sessionStatus === "loading") { console.log("Calendar Widget - Session is loading"); return; } - if (status !== "authenticated" || !session) { + if (sessionStatus !== "authenticated" || !session) { console.log("Calendar Widget - Not authenticated, skipping fetch"); setLoading(false); return; @@ -199,7 +199,7 @@ export function CalendarWidget() { }, 300000); return () => clearInterval(intervalId); - }, [session, status, triggerNotification]); + }, [session, sessionStatus, triggerNotification]); const formatEventDate = (date: Date, isAllDay: boolean) => { let dateString = "";