SPEC — Fix Composant 3 : Import Dynamique Pagefind sans Erreur Vite

Documentation technique

Cycle : DOC → SPEC → CODE → TEST
Scope : Correction de l’erreur Vite Failed to resolve import "/pagefind/pagefind.js" lors d’astro dev.
Destination Spec : docs/PM/phase0-pagefind-search.spec.md

1. Diagnostic de l’Erreur (Log Vite)

[ERROR] [vite] Internal server error: Failed to resolve import "/pagefind/pagefind.js" from "src/components/SearchModal.astro"

Cause Racine :

L’analyseur statique de Vite (vite:import-analysis) a essayé d’analyser la chaîne littérale "/pagefind/pagefind.js" à la compilation d’Astro dev. Comme le fichier /pagefind/pagefind.js est généré uniquement lors du post-build par le binaire pagefind, l’importation statique échoue.

2. Solution Technique (CODE)1/2

Dans apps/web/src/components/SearchModal.astro :

Remplacer la chaîne littérale statique dans import() par une variable dynamique et le commentaire /* @vite-ignore */ :

async function initPagefind() {
  if (pagefind) return pagefind;
  try {
    const pagefindPath = '/pagefind/pagefind.js';
    pagefind = await import(/* @vite-ignore */ pagefindPath);
    await pagefind.init();
    return pagefind;
  } catch (e) {
    console.warn('[Pagefind] Index non disponible localement.', e);
    return null;
  }
}

2. Solution Technique (CODE)2/2

Cela empêche Vite de tenter de résoudre la dépendance au moment de la compilation.
En mode dev, si /pagefind/pagefind.js n’existe pas encore sur le serveur local, le bloc catch intercepte l’erreur proprement et affiche un message informatif dans l’UI sans faire crasher le serveur Astro.

3. Critères de Validation (TEST)

task dev (serveur Astro) démarre sans crash ni erreur 500 Vite.
La page s’affiche correctement dans le navigateur sans écran d’erreur Vite.
Cliquer sur le bouton de recherche ou faire Ctrl+K ouvre la modale de recherche sans planter.
npx pnpm typecheck repasse à 0 erreur.
npx pnpm build construit le site et la recherche fonctionne avec les données indexées.