Programmation JavaScript/Erreurs connues

Débogage

Références

Programmation JavaScript

Débogage

Références

Lenteurs

minifier le code.
passer en asynchrone ce qui peut l'être.
alléger les images (.png, .svg)

Vanilla JS

addOnloadHook is not defined

La fonction doit être chargée sans addOnloadHook().

missing ) after argument list

Peut provenir d'un littéral qui n'est pas entre guillemets.

NS_BINDING_ABORTED

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

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

$ is not defined

jQuery n'est pas importé, ou alors pas dans le bloc "head".

ReferenceError: invalid assignment left-hand side

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

npm

ERR! Maximum call stack size exceeded ou ERR! code EBUSY

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

Exclure le dossier des scans antivirus et antimalware.

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Ajouter l'option --max-old-space-size=4096.

React

Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default() is not a function

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

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.

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

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

z-index n'a aucun effet sur cet élément, car il ne s'agit pas d'un élément positionné

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. Votre aide est la bienvenue !