Programmation JavaScript/Erreurs connues
Lenteurs
modifier- minifier le code.
- passer en asynchrone ce qui peut l'être.
- alléger les images (.png, .svg)
Vanilla JS
modifieraddOnloadHook is not defined
modifierLa fonction doit être chargée sans addOnloadHook()
.
missing ) after argument list
modifierPeut provenir d'un littéral qui n'est pas entre guillemets.
NS_BINDING_ABORTED
modifierSi une requête AJAX s'interrompt avec cette erreur dans Firefox, c'est que son chargement a été arrêté. Par exemple parce qu'elle est remplacée par une autre ou que la page qui l'appelle est rechargée.
cannot use 'in' operator to search for "length" in...
modifierMieux vaut tester que l'objet sur lequel on boucle est itérable avant, sous peine d'erreur.
Il faut donc ajouter une ligne avant le .forEach() (ou le .each() jQuery).
jQuery
modifier$ is not defined
modifierjQuery n'est pas importé, ou alors pas dans le bloc "head".
ReferenceError: invalid assignment left-hand side
modifierUn attribut est redéfini avec le mauvais opérateur, par exemple :
// Remplacer "$('#champ1').val() = '1';" par :
$('#champ1').attr('value', '1');
// ou "$('#URL1').attr('href') = 'https://fr.wikibooks.org';" par :
$('#URL1').attr('href', 'https://fr.wikibooks.org');
Node.js
modifiernpm
modifierERR! Maximum call stack size exceeded ou ERR! code EBUSY
modifierLors d'un npm install
, il faut alors lancer npm rebuild
.
Si cela ne fonctionne pas, fermer les programmes qui lisent ce code (ex : IDE) et lancer : npm cache clean --force; npm install
.
Sinon, mettre à jour Node.
EBUSY resource busy or locked
modifierExclure le dossier des scans antivirus et antimalware.
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
modifierAjouter l'option --max-old-space-size=4096
.
React
modifierUncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default() is not a function
modifierSe produit quand on importe un module inexistant. Pour importer une fonction seulement, utiliser la syntaxe avec accolade. Ex :
import React, { useEffect } from 'react'
Can't perform a React state update on an unmounted component
modifierCette erreur se produit quand le composant n'est plus présent dans la page, mais que son état est mis à jour par la conclusion d'une opération asynchrone (Promise, timer, évènement...).
Pour ne plus avoir ce message, il faut libérer les ressources (timer, annuler les requêtes en cours...) dans la fonction retournée dans le code d'un useEffect, et gérer un booléen mis à jour pour connaître l'état du composant au début des callbacks pour ne pas effectuer le traitement si le composant n'est plus monté.
A component is changing an uncontrolled input of type controltype to be controlled.
modifierA component is changing an uncontrolled input of type controltype to be controlled. Input Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Les contrôles d'entrée de formulaire (champ texte, case à cocher, liste déroulante, ...) peuvent être contrôlé ou non, mais ne peuvent varier entre les deux modes.
Le mode contrôlé signifie que la valeur est définie par un état (useState
en codage de composant de type fonctionnel).
Cette erreur peut arriver quand l'état n'a pas de valeur initiale définie (undefined
), ce qui met le contrôle d'entrée en mode non contrôlé.
Le mode change à contrôlé quand l'utilisateur modifie la valeur (taper du texte, cocher la case, ...) provoquant un changement de l'état à une valeur définie, passant le contrôle d'entrée en mode contrôlé, ce qui provoque ce message d'erreur.
Dans ce cas, le remède est de définir une valeur initiale (argument de la fonction useState
).
React Hook "use..." is called conditionally. React Hooks must be called in the exact same order in every component render
modifierLes hooks sont les fonctions dont le nom commence par "use" (useState, useEffect). Chaque appel à une telle fonction alloue en interne un emplacement (slot) permettant de stocker l'état interne du hook. Ces fonctions doivent donc être appelées systématiquement, et toujours dans le même ordre, donc sans condition.
React n'est pas un framework stable, et cette erreur peut être un faux positif très gênant.
CSS
modifierz-index n'a aucun effet sur cet élément, car il ne s'agit pas d'un élément positionné
modifierLa propriété CSS z-index
n'agit que sur les éléments ayant une propriété position
.
La solution est de définir cette propriété, en général avec la valeur relative
.