capacitor: 'Plugin' does not have web implementation

Version

Capacitor: 1.0.0-beta.6

Description

I’m trying to generate a new custom plugin and performing both iOS and Web implementation for the plugin. Just to test, I’m using the base plugin that is created with npx @capacitor/cli plugin:generate. I’m not modifying any of the codebase of the plugin, then I deploy the plugin to my application, and when I try to execute it in the web with ionic serve, it triggers the following error: Echo does not have web implementation.

I don’t know if I’m just doing something wrong, but I think I’ve followed all the steps and the plugin seems to work in iOS.

Expected

Plugin should not trigger the eror Echo does not have web implementation because it does indeed have the web implementation.

Steps to reproduce

Create the new plugin

npx @capacitor/cli plugin:generate with following input:

✏️  Creating new Capacitor plugin
? Plugin NPM name (snake-case): capacitor-echo-plugin
? Plugin id (domain-style syntax. ex: com.example.plugin) com.dellos7.capacitorechoplugin
? Plugin class name (ex: AwesomePlugin) Echo
? description: Capacitor echo plugin
? git repository: https://github.com/Dellos7/capacitor-echo-plugin.git
? author: David López
? license: MIT
? package.json will be created, do you want to continue? Yes

then: cd capacitor-echo-plugin npm install cd ios/Plugin pod install pod update cd ../.. npm run build npm link

Deploy the generated plugin to my app:

npm link ../Plugins/capacitor-echo-plugin --save npx cap update (here I put the code to run the plugin in the app, see Code below) ionic serve

When I click in a button to test the plugin, triggers the error Echo does not have web implementation

Code

src/pages/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Plugins } from '@capacitor/core';
import { Echo } from 'capacitor-echo-plugin';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  test() {
    const {Echo} = Plugins;
    Echo.echo({ value: 'Hello!' })
    .then( (res) => {
      console.log('RES: ' + res);
    })
    .catch( (err) => {
      console.error('ERR: ', err);
    });
  }

}

src/pages/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button block (click)="test()">
    Test
  </button>
</ion-content>

ionic info

cli packages: (/Users/david/.npm-global/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

local packages:

    @ionic/app-scripts : 3.1.11
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.11.4
    npm  : 6.4.0
    OS   : macOS High Sierra

Misc:

    backend : legacy

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 15 (8 by maintainers)

Most upvoted comments

This has been fixed by adding registerWebPlugin to the default plugin template we ship.

However, to back-port existing plugins, add this at the end of your web.ts:

import { registerWebPlugin } from '@capacitor/core';
registerWebPlugin(MyPlugin);

mlynch on May 16, 2019

I think I resolved it.

Same as in Android we have to register the custom plugin in the Web/PWA as well.

Find the init component of your app, which is in Angular app.component.ts and register this plugin by

import {registerWebPlugin} from "@capacitor/core";
import {OAuth2Client} from '@teamconductor/capacitor-oauth2';

@Component()
export class AppComponent implements OnInit {

    ngOnInit() {
        console.log("Register custom capacitor plugins");
        registerWebPlugin(OAuth2Client);
        // other stuff
    }
}

After that I can simply call it from the Plugins class like core plugins.

Plugins.OAuth2Client.authenticate({}).then(...).catch();

moberwasserlechner on Sep 9, 2018

Yes you need to import it like that to get it to register. We will update the docs

On Sun, May 19, 2019 at 1:02 AM Parveen Khatkar notifications@github.com wrote:

Hi! @mlynch https://github.com/mlynch Is this supposed to magically work or the plugin still needs to be imported? I found the plugin had to be imported import ‘@codetrixstudio/capacitor-google-auth’; for the registerWebPlugin to be called and reasonably so but confirming.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/ionic-team/capacitor/issues/749?email_source=notifications&email_token=AAACXTTZAJHEPI3OYCVX7ALPWDUOXA5CNFSM4FQJ24JKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVW3PCY#issuecomment-493729675, or mute the thread https://github.com/notifications/unsubscribe-auth/AAACXTUG2KF4PLFP6ZT2TN3PWDUOXANCNFSM4FQJ24JA .

–

Max Lynch CEO/Co-founder, Ionic max@ionicframework.com

mlynch on May 19, 2019

@mlynch have you updated the docs? I’m still stuck on getting our web implementation to register

typeoneerror on Oct 9, 2019

@iordache-eminds

Probably this step?

Register the plugin by importing it. import "@codetrix-studio/capacitor-google-auth";

To trigger the registration code in a capacitor plugin for the web, you need to import it.

fullstackduck on Oct 2, 2019

@ImperialDevelopment Please try it.

const { Echo } = Plugins;
Echo.echo({ value: 'Hello!' });

↓

Plugins.Echo.echo({ value: 'Hello!' });

I see Proxy don’t work well. You should access direct.

rdlabo on Apr 4, 2019

Helo @netsesame2,

As far as I understand, Capacitor plugins have the ability to work both in device and in web context. You can check it in the documentation.

Actually I have been able to use e.g the Camera plugin in the web context, but I’m just not able to make my own plugin work in web context.

Dellos7 on Sep 2, 2018

Hi! @mlynch Is this supposed to magically work or the plugin still needs to be imported? I found the plugin had to be imported import '@codetrixstudio/capacitor-google-auth'; for the registerWebPlugin to be called and reasonably so but confirming.

fullstackduck on May 19, 2019