Fix the [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. error message

If you're like me, you love the feeling of having a clean console without any errors or warnings. But, like me, I'm sure you've already encountered this warning message:

[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.

This message simply tells us that some listener added to a touchstart event isn't passif, which means that it's callback function is able to call event.preventDefault which then changes the way events are handled and could cause some performance issues.

Here is a detailed Google article with more informations on this subject.

Easy enough then, we should just add the {passive: true} option to our listeners. But what about third party libraries that haven't yet adapted to this best practice?

The passive-events-support library

A library has been created to fix this very issue : https://www.npmjs.com/package/passive-events-support

Imported before any library that triggers this warning, it should be used like this:

// Before any third party import that causes issues
import { passiveSupport } from 'passive-events-support/src/utils';

passiveSupport({
  events: 'touchstart', // or any other event tyoes
});

Warnings fixed!

Ultimate sophistication? Optimization to the bitter end? I don't have the answer, but while waiting for libraries to adapt I found that this solution was still interesting to share.