Capacitor: 'Plugin' does not have web implementation

[Dellos7]

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

1. 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

1. 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

[netsesame2]

As I know, plugin can only work in device context.
when you invoke ionic serve, it is browser context only

[Dellos7]

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.

[moberwasserlechner]

I agree with @Dellos7. It's kind of Capacitor's USP that it runs on Web/PWA context as well and the core plugins like Device already do so.

I have the same problem with my custom plugin and I think it's somehow releated to registering the custom plugin as webPlugin.

Maybe something like https://github.com/ionic-team/capacitor/blob/287e1892e2ff2f6b8d4516d916e5bcb6b6a653fa/core/src/web-plugins.ts#L14-L18 have to be called.

I asked in Capacitor's slack as well and hope that we can figure this out.

[moberwasserlechner]

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();

[ghost]

Are there any updates on this issue?
The workaround of @moberwasserlechner does not work for me.

[rdlabo]

@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.

[mlynch]

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);

[parveenkhtkr]

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.

[mlynch]

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 [e-mail]
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
[email protected]

[iordache-eminds]

Hello @mlynch,
I can see that @codetrixstudio/capacitor-google-auth plugin does the registration web plugin for us, but somehow I keep getting "GoogleAuth does not have web implementation." Am I missing something !? :/

[parveenkhtkr]

@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._

[iordache-eminds]

@parveenkhtkr thanks for your reply.

Actually I don't know where I should import it.
I've tried like this import "@codetrix-studio/capacitor-google-auth"; in app.components.ts
and also import {GoogleAuth } "@codetrix-studio/capacitor-google-auth";

short updated: Now it's seems to work after I've run re-lunched the app.

[typeoneerror]

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