NeahStable/PROBLEME_CALENDAR_WIDGET.md

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 :

export function CalendarWidget() {
  const { data: session, status } = useSession();  // Ligne 25 - Déclaration
  const [events, setEvents] = useState<Event[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { triggerNotification } = useWidgetNotification();
  const lastEventCountRef = useRef<number>(-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 :

// 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

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

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)

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 :

"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<Event[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { triggerNotification } = useWidgetNotification();
  const lastEventCountRef = useRef<number>(-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 ?