Capacitor 2.4.7 cannot read property "addListener" of undefined for LocalNotificationExtension

[LamJingJie]

Hi this is my first post so, if there is any thing I am missing do inform me :)

I am pretty new to programming in general and I am currently building an app to receive local notifications in my application. Just a simple local notification scheduling and when the time comes it will be send to the user device in which it the 'localNotificationReceived' will catch it and then run the necessary codes.

I am using Ionic 5 React with Capacitor

However, as you can see in my codes below I have tried 2 methods but to no avail. I kept giving me this error whenever I try to run it on my device.

Any help will be greatly appreciated :)

App info Ionic:

Ionic CLI : 6.13.1 Ionic Framework : @ionic/react 5.6.0

Capacitor:

Capacitor CLI : 2.4.7 @capacitor/core : 2.4.7

Utility:

cordova-res : 0.15.3 native-run : 1.3.0

System:

NodeJS : v15.4.0 (C:\Program Files\nodejs\node.exe) npm : 7.0.15 OS : Windows 10

Codes

import { IonApp, IonRouterOutlet, IonSplitPane, isPlatform, useIonViewWillEnter } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';
import Menu from './components/Menu';
import Page from './pages/Page';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

//Pages
import Home from './pages/Home';
import About from './pages/About';
import * as $ from "jquery"

//local notification
import { LocalNotification, Plugins, LocalNotificationActionPerformed } from '@capacitor/core';

const App: React.FC = () => {

  const { LocalNotifications, LocalNotificationExtension } = Plugins;
  LocalNotifications.requestPermission();

/*Start*/

//Method (1) Doesn't work
  LocalNotificationExtension.addListener('localNotificationReceived', (localNotification: LocalNotification) => {
    // Do what you want
    alert("Notification Received");
  });

//Method (2) Also doesn't work
const LocalNotificationPlugin= ()=>{
    return isPlatform('android') ? LocalNotificationExtension : LocalNotifications;
  }

  LocalNotificationPlugin().addListener('localNotificationReceived', (localNotification: LocalNotification) => {
    // Do what you want
    alert("Notification Received");
  });

  /*End*/

  LocalNotifications.addListener('localNotificationActionPerformed', (notificationAction: LocalNotificationActionPerformed)=> {
    console.log(notificationAction.notification);
    alert("Notification Clicked");
  });

  /*LocalNotifications.addListener('localNotificationReceived', (notification: LocalNotification) => {
    console.log('Notification: ', notification);
    alert(notification.title);
  });*/

  console.log("Done")

  return (
    <IonApp >
      <IonReactRouter >
        <IonSplitPane  contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/" exact={true}>
              <Redirect to="/page/home" />
            </Route>

            <Route path="/page/home" component={Home} exact={true} /> 

            <Route path="/page/about" component={About} exact={true} /> 

          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

Error when tried to run on physical device

E/Capacitor/Console: File: http://localhost/static/js/4.3d51a168.chunk.js - Line 2 - Msg: TypeError: Cannot read property 'addListener' of undefined E/Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot read property 'addListener' of undefined","url":"http://localhost/static/js/4.3d51a168.chunk.js","line":2,"col":589652,"errorObject":"{}"}} E/Capacitor/Console: File: capacitor-runtime.js - Line 359 - Msg: TypeError: Cannot read property 'addListener' of undefined E/Capacitor/Console: File: http://localhost/static/js/4.3d51a168.chunk.js - Line 2 - Msg: Uncaught TypeError: Cannot read property 'addListener' of undefined

[no-dap]

Thanks for the detailed information, I'm going to investigate this ASAP :)

[no-dap]

Did you add LocalNotificationExtension plugin class to your MainActivity plugin list?
This plugin has some boilerplates to do for android before applying.

Check that you have to add both NotificationExtension and LocalNotificationExtension to your main activity.

[no-dap]

And I also recommend the second method that you used, the first one will cause the same error on iOS.