Error: Undefined object trying to access 'vibrate' property

Good day, I apologize for my poor English. I am encountering an issue with Ionic Capacitor while attempting to utilize the Vibration plugin. The documentation lacks detailed information, and when checking the Android Studio terminal, I found the following error message:

Error:

https://i.sstatic.net/UdAfk.png

This is the snippet of code I am working with:

import { Plugins, CameraResultType } from '@capacitor/core';
import { Vibration } from '@ionic-native/vibration/ngx';

const { Camera } = Plugins

interface Props extends React.Props<ControlVibratorComponent> {

}

export default class ControlVibratorComponent extends React.Component<Props>{

    constructor(props: any, private vibration: Vibration) {
        super(props);
    }

    changeNotificationState(e: any) {
        if (e.detail.value > 0) {
            console.log('vibrating');
            this.vibration.vibrate(2000);
        } else {
            console.log('stop');
            this.vibration.vibrate(0);
        }
    }
}

Answer №1

When developing your app with Capacitor, it is recommended to utilize capacitor plugins whenever feasible. If you need vibration functionality, consider incorporating the capacitor Haptics Plugin

Answer №2

Not sure if Cordova plugins are compatible with Capacitor. However, if they are, here are the steps to use a plugin:

1- Add the plugin:

ionic cordova plugin add cordova-plugin-example

2- Install the package:

npm install @ionic-native/example

3- Import it in app.module.ts and include it in the providers array:

import {YourPlugin} from './path-to-your-plugin-in-node_modules';

@NgModule({
  ...
  providers: [
    ...
    YourPlugin
    ...
  ],
  ...
})
export class AppModule {
}

Import the plugin in your component controller (.page.ts file), create an instance of it in the constructor, and utilize its methods:

import {YourPlugin} from './path-to-your-plugin-in-node_modules';

@Component({
  selector: 'app-somepage',
  templateUrl: './somepage.page.html',
  styleUrls: ['./somepage.page.scss'],
})
export class SomepagePage implements OnInit, AfterViewInit {

  constructor(private plugin: YourPlugin) {
  }
}

If you deviate from these instructions, you may have made an error. Please follow the steps again.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering Typescript issues while trying to access @angular/core packages

Recently, I made an update to my Ionic app from Angular 7 to Angular 8, and an odd error popped up: The issue lies in the fact that I am unable to access any of the standard classes stored in the @angular/core module. This same problem is occurring with o ...

Ionic-React - Triggering setState does not result in re-rendering

After invoking setMyState in a useEffect hook, I expect React to re-evaluate the logic to determine whether to render MyPage or IonSpinner. However, MyPage does not appear on the screen unless I switch to a different tab and return (using Ionic's IonT ...

What is the process to generate a universal error page in Angular?

I have implemented a simple example in Angular 6 using a globalErrorHandler for error cases. I have also included a loader that runs after the login operation and before loading data into a table. Everything seems to be working fine, but I have encountered ...

Restrict the number of rows in a CSS grid

Hello there, I am in the process of creating an image gallery using CSS grid. Specifically, my goal is to initially show just one row of images and then allow users to click a "Show more" button to reveal additional images. You can see my progress here: ...

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

Recommendations for Organizing Multiple "Isolated" Applications Using MVC 5 and Angular 2

We are currently managing a large MVC 5 ASP.NET 4.5.1 web application that follows the concept of treating each page as its own application due to the vast areas it covers. The existing pages are built using JQuery, regular Javascript, and Handlebars templ ...

Utilizing dispatch sequentially within ngrx StateManagement

I have been working on a project that utilizes ngrx for state management. Although I am still fairly new to ngrx, I understand the basics such as using this.store.select to subscribe to any state changes. However, I have a question regarding the following ...

Utilize Typescript to ensure uniformity in object structure across two choices

Looking to create a tab component that can display tabs either with icons or plain text. Instead of passing in the variant, I am considering using Typescript to verify if any of the icons have an attribute called iconName. If one icon has it, then all othe ...

What is the method for determining the length of a piped array within a template?

Here is a sample code snippet showcasing how to get the length of an array when not using a pipe: <my-component [arrLen]='arrayA.length'></my-component> But what if you want to get the length of a filtered array using a pipe? The exa ...

Using TypeScript with Angular: encountering a ReferenceError stating that the System object is not defined in the System

I attempted to follow a tutorial to set up Angular 2 with TypeScript from the following link: https://angular.io/guide/quickstart However, I encountered the following error: ReferenceError: System is not defined System.config I am uncertain why this e ...

Google's reCAPTCHA issue: systemjs not found

Currently, I am attempting to integrate Google's reCAPTCHA into an Angular application by following a helpful tutorial found here. However, I have encountered a problem as the systemjs.config.js file seems to be missing from my Angular CLI project. An ...

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

In my Angular 4 project, I have integrated Bootstrap, Fontawesome, and some custom CSS. However, all these styles are rendering as separate tags at the top of my index.html file. I would like them to be combined into a single bundled CSS file for better ...

Utilize a custom Angular2 validator to gain entry to a specific service

For accessing my custom http service from within a static method, consider the following example: import {Control} from 'angular2/common'; import {HttpService} from './http.service'; class UsernameValidator { static usernameExist( ...

Setting up Tarui app to access configuration data

I am looking to save a Tauri app's user configuration in an external file. The TypeScript front end accomplishes this by: import {appConfigDir} from "tauri-apps/api/path"; ... await fetch(`${await appConfigDir()}symbol-sets.json`) { ... ...

Troubleshooting Typescript Compilation Error in React - Cannot assign type 'Element' to type 'FunctionComponent<{}>'

The code snippet originally utilized - import { Create } from '@material-ui/icons'; <DroppableFolder count={draftsCount} sidebarOpen={open} folderId={FolderType.Drafts} Icon={Create} name="Dr ...

Can type information be incorporated during compilation?

Consider the code snippet below: function addProperties(keys: String[]): Object { // For illustration purposes, this is a specific return return { firstProperty: "first_value", secondProperty: "second_value" }; } export defaul ...

Troubleshooting the issue with integrating a user-defined Cordova plugin in Ionic 2 using TypeScript

I have developed a custom Cordova plugin and I am trying to integrate it with an Ionic 2 project that is using TypeScript and Angular 2. While I have successfully added the plugin to the Ionic 2 project, I am facing issues when trying to call methods defin ...

Using Typescript to Convert JSON Data into Object Instances

My challenge involves a Json object structure that looks something like this: { "key" : "false", "key2" : "1.00", "key3" : "value" } I am seeking to convert this in Typescript to achieve th ...

Struggling to effectively work with ArrayForm when trying to include additional form fields

I'm attempting to add a playlist in Mat-dialog that contains songs in a list using (formArray) as shown here: https://i.stack.imgur.com/diWnm.png However, I am unsure of the mistake I might be making This is how my dialogue appears: https://i.stac ...

Transmitting image data (blob) from the frontend to the backend using Next.js and tRPC (T3 stack)

I'm currently facing a challenge in sending a leaflet map image from the backend to the frontend using the leaflet-simple-map-screenshoter library for capturing the image. The library returns a blob, which I need to transmit back to the backend and sa ...