Custom plugin 'No web implementation' unless registerWebPlugin manually called in/after app constructor

[Cloov]

I'm trying to develop a custom plugin that makes full use of the WebPlugin variant as well as native variants. I've generated a capacitor project using the getting-started documentation, and the built-in plugin generation script (pages URLs that I used are below).

https://capacitor.ionicframework.com/docs/getting-started/
https://capacitor.ionicframework.com/docs/plugins/

I modify my starter project to install the plugin node-module, and I import it in home.ts and add code to invoke a method in the plugin. This method is fully defined in my plugin, in both the iOS code, and in the web plugin variant, with the method signatures being as compliant as I think they can be.

When running natively, the plugin runs, but when running on web, I'm told there's no web implementation.

If I make a call to registerWebPlugin in certain other locations - like in the app's constructor in app.component.ts, then the web plugin works.

I can see that registerWebPlugin now sits inside web.ts in plugins generated with the command line script, but it seems like it's not having any effect for me. Like I say, if I call registerWebPlugin from the app constructor, that works, and it works regardless of whether or not I've removed the identical call from the plugin's web.ts file.

Here are repositories for the app and plugin that manifest the issue.

App: https://github.com/Cloov/capacitor-plugin-test.git
Plugin: https://github.com/Cloov/concatenate.git

'Concatenate' is my sample plugin; it has one method, that combines two input strings.

Currently, the extra registerWebPlugin call is instated, but remove it from the constructor in app.component.ts, and the plugin should, once again, report at runtime that there's no web implementation.

[typeoneerror]

Same issue here. No web implementation.

[biesbjerg]

I think I found something interesting. It seems it has something to do with tree shaking?

See this example using the standard Echo plugin generated by capacitor cli:

import { Plugins } from '@capacitor/core';
import { Echo } from 'echo';

// reference import to prevent tree shaking (?), if this is removed, calls to Plugins.Echo no longer works
if (Echo) {}

// Web implementation available as long as Echo is imported AND referenced in code
console.log(Plugins.Echo.echo({ value: 'Ping' }));

// Also, For some reason typings are not available on Plugins.Echo
console.log(Plugins.Echo.thisMethodDoesNotExist());

// Typings work direcly on import
console.log(Echo.thisMethodDoesNotExist());

Screenshot to illustrate typing errors:

Can we get some attention to this ticket, pretty please? :D @jcesarmobile @mlynch

[mludi]

Any news on that? I've the same issue here.

[biesbjerg]

I ended up creating a custom api that imports and typecasts the plugin to work around the issue for now.

import { MusicPlayerPlugin } from './definitions';

const MusicPlayer = Plugins.MusicPlayer as MusicPlayerPlugin;

class MusicPlayerRx {
	public async play(): Promise<void> {
		return MusicPlayer.play();
	}
}

Then the developer can import the custom API class and have full typings.

import { Injectable } from '@angular/core';
import { MusicPlayerRx } from '@biesbjerg/capacitor-music-player';

@Injectable()
export class PlayerService {
	public constructor(protected musicPlayer: MusicPlayerRx) {
		musicPlayer.setupPlayer();
	}
}

It sucks having to proxy methods to the real plugin (if that is all you do with the custom API), but it's a workaround for now.

[mludi]

I'll have a look. Thanks @biesbjerg !

[Timeswitch]

You can also just import your plugin inside your app.

import 'my-awesome-plugin';
import { Plugins } from '@capacitor/core';


function SomewhereInYourApp()
{
   const {MyAwesomePlugin} = Plugins;
   MyAwesomePlugin.doStuff();
 
}

If you don't import your Plugin, registerWebPlugin won't get called, so the registry doesn't know there is a web implementation.
The reason you native implementations work, is because they get picked up by capacitors auto-binding.

Edit:

Removed my old answer to avoid confusion.

[mlynch]

This is the current preferred way to do this. If your plugin calls registerWebPlugin then simply doing an import 'my-awesome-plugin' will engage that. Then, make sure to access the plugin from the Plugins object right before using it, since Plugins is a proxy and if you destructure too soon (such as in the top level of your file) you'll get the (missing) native version.