Adblockers are always detected as enabled in ReactJS

[andreathniah]

As the title says, it seems that adblocks are always detected when used in ReactJS even when there are no adblock in place. The code below is copied wholesale from the demo website.

Here's the link: https://codesandbox.io/s/64k2rx8w03

import React from "react";
import ReactDOM from "react-dom";
import fuckAdBlock from "fuckadblock";

class DetectAdBlock extends React.Component {
  // Function called if AdBlock is not detected
  adBlockNotDetected = () => {
    alert("AdBlock is not enabled");
  };
  // Function called if AdBlock is detected
  adBlockDetected = () => {
    alert("AdBlock is enabled");
  };

  detectAdBlock = () => {
    // We look at whether FuckAdBlock already exists.
    if (
      typeof fuckAdBlock !== "undefined" ||
      typeof FuckAdBlock !== "undefined"
    ) {
      // If this is the case, it means that something tries to usurp are identity
      // So, considering that it is a detection
      this.adBlockDetected();
    } else {
      // Otherwise, you import the script FuckAdBlock
      var importFAB = document.createElement("script");
      importFAB.onload = function() {
        // If all goes well, we configure FuckAdBlock
        fuckAdBlock.onDetected(this.adBlockDetected);
        fuckAdBlock.onNotDetected(this.adBlockNotDetected);
      };
      importFAB.onerror = function() {
        // If the script does not load (blocked, integrity error, ...)
        // Then a detection is triggered
        this.adBlockDetected();
      };
      importFAB.integrity =
        "sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=";
      importFAB.crossOrigin = "anonymous";
      importFAB.src =
        "https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js";
      document.head.appendChild(importFAB);
    }
  };

  render() {
    return (
      <div id="adblock-wrapper">
        <button onClick={this.detectAdBlock}>click me</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<DetectAdBlock />, rootElement);

[sitexw]

I think it's related to the way you implanted FuckAdBlock and the React.js compiler. I advise you to use the import via AMD and CommonJS (#77).

[FrancescoMussi]

I have the same issue with Vue.

Could you please provide an example on how to install it with Vue?

Thanks