Tous les avertissements de votre projet ne viennent pas du code que vous avez écrit.
Il y a quelques jours, je voyais sans cesse cet avertissement dans la console : « Unable to preventDefault inside passive event listener invocation. »
Je travaillais sur une fonctionnalité Stories façon Instagram : images, vidéos, navigation au tap et pause en appui long. La fonctionnalité marchait bien, mais l’avertissement apparaissait presque à chaque tap sur mobile.
Ma première réaction était évidente : où me suis-je trompé ? J’ai lu la stack trace, et le problème ne venait pas du tout de mon code. Il venait de react-insta-stories : la bibliothèque appelait e.preventDefault() directement dans un événement tactile.
Le problème : l’événement passait par un listener passif, donc pas toujours annulable. Le navigateur continuait donc d’afficher cet avertissement. Le correctif était simple : if (e.cancelable) e.preventDefault(); ; une ligne, et l’avertissement a disparu sans changer le comportement.
Ce que j’en retiens surtout : tous les avertissements de votre projet ne viennent pas du code que vous avez écrit. Parfois, lire la stack trace attentivement peut vous éviter de passer des heures à corriger la mauvaise chose. J’ai signalé le problème en amont, car il y a de bonnes chances qu’un autre développeur rencontre exactement le même problème.
Publication originale (site externe)