content: Missing Event type when trying to subscribe to 'ionBackButton' with React.

[Fep310]

URL

https://ionicframework.com/docs/developing/hardware-back-button

Issue Description

When trying to subscribe to 'ionBackButton' the way it is written on the docs, the compiler complains about the property detail with the message: "Property 'detail' does not exist on type 'Event'.ts(2339)".

The current solution is to cast the event parameter to any. Other solutions have been tried, like casting to BackButtonEvent from @ionic/react or @ionic/core.

Image below is how I found the current solution on the Ionic discord:

npm ls:

├── @capacitor-community/admob@7.0.3
├── @capacitor-community/keep-awake@7.1.0
├── @capacitor/android@7.4.2
├── @capacitor/app@7.0.1
├── @capacitor/assets@3.0.5
├── @capacitor/browser@7.0.2
├── @capacitor/cli@7.4.2
├── @capacitor/core@7.4.2
├── @capacitor/device@7.0.2
├── @capacitor/haptics@7.0.1
├── @capacitor/ios@7.4.2
├── @capacitor/keyboard@7.0.1
├── @capacitor/status-bar@7.0.1
├── @ionic/core@8.7.3
├── @ionic/react-router@8.7.1
├── @ionic/react@8.7.1
├── @testing-library/dom@10.4.1
├── @testing-library/jest-dom@5.17.0
├── @testing-library/react@16.3.0
├── @testing-library/user-event@14.6.1
├── @types/react-dom@19.0.4
├── @types/react-router-dom@5.3.3
├── @types/react-router@5.1.20
├── @types/react@19.0.10
├── @vitejs/plugin-legacy@7.2.1
├── @vitejs/plugin-react@4.7.0
├── cypress@13.17.0
├── eslint-plugin-react-hooks@5.2.0
├── eslint-plugin-react-refresh@0.4.20
├── eslint-plugin-react@7.37.5
├── eslint@9.32.0
├── globals@15.15.0
├── ionicons@7.4.0
├── jsdom@22.1.0
├── react-dom@19.0.0
├── react-router-dom@5.3.4
├── react-router@5.3.4
├── react@19.0.0
├── terser@5.43.1
├── typescript-eslint@8.38.0
├── typescript@5.8.3
├── vite@7.1.1
└── vitest@3.2.4

[aeharding]

CustomEvent<BackButtonEventDetail> is the param:

import { App } from "@capacitor/app";
import { BackButtonEventDetail } from "@ionic/core";
import { useEffect } from "react";

import { useOptimizedIonRouter } from "#/helpers/useOptimizedIonRouter";

export default function AndroidBackButton() {
  const router = useOptimizedIonRouter();

  // Back button handling for Android native app
  useEffect(() => {
    const backButtonHandler = (ev: CustomEvent<BackButtonEventDetail>) => {
      ev.detail.register(-1, () => {
        // pswp is the gallery component. It pushes state, but the router isn't aware.
        // So if that's open, don't close the app just yet
        if (!router.canGoBack() && !document.querySelector(".pswp--open")) {
          App.exitApp();
        }
      });
    };

    document.addEventListener(
      "ionBackButton",
      backButtonHandler as EventListener,
    );

    return () => {
      document.removeEventListener(
        "ionBackButton",
        backButtonHandler as EventListener,
      );
    };
  }, [router]);

  return null;
}