Dépannage #

Voir le Guide de dépannage de Rollup pour plus d'informations.

Si les suggestions faites ici ne fonctionnent pas, essayez de poster des questions sur GitHub Discussions ou dans le canal #help de Vite Land Discord.

CLI #

Error: Cannot find module 'C:\foo\bar&baz\vite\bin\vite.js'. #

Le chemin du dossier de votre projet peut inclure &, ce qui ne fonctionne pas avec npm sous Windows (npm/cmd-shim#45).

Vous devrez soit :

• Passer à un autre gestionnaire de paquets (par exemple, pnpm, yarn)
• Supprimer & du chemin vers votre projet

Dev Server #

Les requêtes sont bloquées pour toujours #

Si vous utilisez Linux, les limites des descripteurs de fichiers et les limites inotify peuvent être à l'origine du problème. Comme Vite ne regroupe pas la plupart des fichiers, les navigateurs peuvent demander de nombreux fichiers qui nécessitent de nombreux descripteurs de fichiers, dépassant ainsi la limite.

Pour résoudre ce problème :

• Augmentez la limite de descripteurs de fichiers par ulimit.

  shell

  # Vérifiez la limite actuelle
  $ ulimit -Sn
  # Modifier la limite (temporaire)
  $ ulimit -Sn 10000 # Il se peut que vous deviez également modifier la limite définitive.
  # Redémarrez votre navigateur
  

• Augmentez les limites suivantes liées à inotify par sysctl.

 # Vérifiez les limites actuelles
 $ sysctl fs.inotify
 # Modifier les limites (temporairement)
 $ sudo sysctl fs.inotify.max_queued_events=16384
 $ sudo sysctl fs.inotify.max_user_instances=8192
 $ sudo sysctl fs.inotify.max_user_watches=524288

431 Champs d'en-tête de requête trop grands #

Lorsque le serveur / serveur WebSocket reçoit un en-tête HTTP trop grand, la requête est abandonnée et l'avertissement suivant s'affiche.

Le serveur a répondu avec le code d'état 431. Voir https://vitejs.dev/guide/troubleshooting.html#_431-request-header-fields-too-large.

Ceci est dû au fait que Node.js limite la taille de l'en-tête de la requête pour atténuer CVE-2018-12121.

Pour éviter cela, essayez de réduire la taille de votre en-tête de requête. Par exemple, si le cookie est long, supprimez-le. Vous pouvez également utiliser --max-http-header-size pour modifier la taille maximale des en-têtes.

HMR #

Vite détecte un changement de fichier mais le HMR ne fonctionne pas. #

Il se peut que vous importiez un fichier avec un cas différent. Par exemple, src/foo.js existe et src/bar.js contient :

import './Foo.js' // doit être './foo.js'.

Problème connexe : #964

Vite ne détecte pas un changement de fichier #

Si vous exécutez Vite avec WSL2, Vite ne peut pas surveiller les changements de fichiers dans certaines conditions. Voir l'option server.watch.

Un rechargement complet se produit au lieu de HMR #

Si HMR n'est pas géré par Vite ou un plugin, un rechargement complet aura lieu.

De même, s'il y a une boucle de dépendance, un rechargement complet se produira. Pour résoudre ce problème, essayez de supprimer la boucle.

Build #

Le fichier construit ne fonctionne pas à cause d'une erreur CORS. #

Si la sortie du fichier HTML a été ouverte avec le protocole file, les scripts ne fonctionneront pas avec l'erreur suivante.

L'accès au script 'file:///foo/bar.js' depuis l'origine 'null' a été bloqué par la politique CORS : Les demandes d'origine croisée ne sont prises en charge que pour les protocoles suivants : http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

Demande d'origine croisée bloquée : La politique de même origine interdit la lecture de la ressource distante à file:///foo/bar.js. (Motif : requête CORS non http).

Voir Reason : CORS request not HTTP - HTTP | MDN pour plus d'informations sur les raisons de ce blocage.

Vous devrez accéder au fichier avec le protocole http. Le moyen le plus simple d'y parvenir est d'exécuter npx vite preview.

Autres #

Une erreur de syntaxe / erreur de type se produit #

Vite ne peut pas gérer et ne supporte pas le code qui s'exécute uniquement en mode non strict (sloppy mode). Ceci est dû au fait que Vite utilise ESM et qu'il est toujours en [mode strict] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode) dans ESM.

Par exemple, vous pouvez voir ces erreurs.

[ERROR] With statements cannot be used with the "esm" output format due to strict mode

TypeError: Cannot create property 'foo' on boolean 'false'

Si ces codes sont utilisés dans des dépendances, vous pouvez utiliser patch-package (ou yarn patch ou pnpm patch) comme échappatoire.