Programmation JavaScript/Erreurs connues
Lenteurs
[modifier | modifier le wikicode]- minifier le code.
- passer en asynchrone ce qui peut l'être.
- alléger les images (.png, .svg)
Vanilla JS
[modifier | modifier le wikicode]addOnloadHook is not defined
[modifier | modifier le wikicode]La fonction doit être chargée sans addOnloadHook().
missing ) after argument list
[modifier | modifier le wikicode]Peut provenir d'un littéral qui n'est pas entre guillemets.
NS_BINDING_ABORTED
[modifier | modifier le wikicode]Si 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...
[modifier | modifier le wikicode]Mieux 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 | modifier le wikicode]$ is not defined
[modifier | modifier le wikicode]jQuery n'est pas importé, ou alors pas dans le bloc "head".
ReferenceError: invalid assignment left-hand side
[modifier | modifier le wikicode]Un 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
[modifier | modifier le wikicode]npm
[modifier | modifier le wikicode]ERR! Maximum call stack size exceeded ou ERR! code EBUSY
[modifier | modifier le wikicode]Lors 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
[modifier | modifier le wikicode]Exclure le dossier des scans antivirus et antimalware.
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
[modifier | modifier le wikicode]Ajouter l'option --max-old-space-size=4096.
React
[modifier | modifier le wikicode]Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default() is not a function
[modifier | modifier le wikicode]Se 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
[modifier | modifier le wikicode]Cette 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.
[modifier | modifier le wikicode]A 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
[modifier | modifier le wikicode]Les 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
[modifier | modifier le wikicode]z-index n'a aucun effet sur cet élément, car il ne s'agit pas d'un élément positionné
[modifier | modifier le wikicode]La 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.
Cette section est vide, pas assez détaillée ou incomplète.