SyntaxError: Unexpected '#' used outside of class body

L'expression JavaScript "Unexpected '#' used outside of class body" (qu'on peut traduire par « '#' inattendu en dehors d'un corps de classe ») se produit lorsqu'un croisillon (« # ») est trouvé dans un contexte inattendu, notamment en dehors d'une déclaration de classe. Les croisillons sont valides au début d'un fichier comme commentaire d'interpréteur, ou à l'intérieur d'une classe pour indiquer un champ privé. Vous pouvez également rencontrer cette erreur si vous oubliez d'encadrer un identifiant DOM entre quotes (la chaîne de caractères n'étant alors pas délimitée).

Message

js
SyntaxError: Unexpected '#' used outside of class body.

Type d'erreur

Quel est le problème ?

Un caractère # a été trouvé dans un contexte inattendu. Cela peut être à du code déplacé qui ne fait plus partie d'une classe, à un commentaire d'interpréteur (hashbang) situé sur une autre ligne que la première ou à l'oubli de quotes/guillemets autour d'un identifiant du DOM.

Exemples

Délimiteurs de chaîne manquants

Pour chaque cas, on peut avoir une légère erreur qui produit cette exception. Par exemple :

js
document.querySelector(#un-élément)

Pourra être corrigé avec :

js
document.querySelector("#un-élément");

En dehors d'une classe

js
class ClasseAvecChampPrivé {
  #champPrivé;

  constructor() {}
}

this.#champPrivé = 42;

Cela pourra être corrigé en déplaçant le champ privé à l'intérieur de la classe :

js
class ClasseAvecChampPrivé {
  #champPrivé;

  constructor() {
    this.#champPrivé = 42;
  }
}

Voir aussi