Capacitor 3.0 Upgrade Plugins "not implemented" Exception (Nx Monorepo)

Question

We use Angular in a nx monorepo in which we have been using Capacitor 2.4 for half a year now. We only use the android platform as of now. Now, we need to upgrade to Capacitor 3.0. The app itself is running again, however, as soon as I use any Plugin I always get the following exception: ERROR Error: "Device" plugin is not implemented on android

This is the same for every Plugin I have tried to use. So, if I would use the Storage Plugin I would get the same exception only for "Storage". I have followed the Capacitor migration guide (https://capacitorjs.com/docs/v3/updating/3-0) in detail, but I can't figure out where I went wrong. In general, the app works now, as long as I have any code that uses a Capacitor Plugin commented out. The code using the Plugins did work before the upgrade.

As according to the migration guide, I added import '@capacitor/core'; at the main.ts file, although I also tried putting it in the app.module.ts but had no success there either. I have installed every plugin for the whole app (the root) and for the nx-capacitor app (the capacitor app added with @nxtend-capacitor) as suggested here https://nxtend.dev/docs/capacitor/getting-started/. I also have updated the capacitor cli, the capacitor core and the capacitor android version for both package.json files. Furthermore, according to the android upgrading guide, I have also updated gradle and the android gradle plugin. I have also updated the Android variables accordingly.

I honestly do not have too much experience or in-depth knowledge of Capacitor and I am aware that Capacitor 3 is still in Beta as of this point. However, maybe someone has already stumbled upon this problem and found a solution. I am also not sure, if this problem could somehow be caused by using this monorepo approach with nx. Has someone had experience in upgrading Capacitor to 3.0 while using a Nx monorepo?

For reference, this is the current package.json for the capacitor app:

{
  "name": "app-cap",
  "dependencies": {
    "@capacitor-community/electron": "^1.3.2",
    "@capacitor/android": "^3.0.0-rc.0",
    "@capacitor/app": "^0.3.6",
    "@capacitor/camera": "^0.4.3",
    "@capacitor/cli": "^3.0.0-rc.0",
    "@capacitor/core": "^3.0.0-rc.0",
    "@capacitor/device": "^0.5.6",
    "@capacitor/filesystem": "^0.5.2",
    "@capacitor/ios": "^3.0.0-rc.0",
    "@capacitor/local-notifications": "^0.6.0",
    "@capacitor/push-notifications": "^0.3.6",
    "@capacitor/storage": "^0.3.6",
    "capacitor-secure-storage-plugin": "^0.5.0",
    "com-darryncampbell-cordova-plugin-intent": "^2.0.0",
    "com.darktalker.cordova.screenshot": "^0.1.6",
    "cordova-plugin-advanced-http": "^3.1.0",
    "cordova-plugin-app-launcher": "^0.4.0",
    "cordova-plugin-appcenter-analytics": "^0.5.1",
    "cordova-plugin-appcenter-crashes": "^0.5.1",
    "cordova-plugin-appcenter-shared": "^0.5.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.5",
    "cordova-plugin-zip": "^3.1.0",
    "jetifier": "^1.6.6"
  }
}

Intort

Answer 1

Both answers are wrong.

Capacitor 3 allows android plugins to auto register, but for that you need to remove the init method from MainActivity.java, if it's there the automatic registration won't work as init is the legacy way of registering plugins.

So you have two options:

1. Remove the init method from MainActivity.java as explained on the capacitor 3 updating docs
2. Keep the legacy init method and add plugins as you did on Capacitor 2. I.E. add(DatepickPlugin.class);

By removing android folder as answer 1 suggests, the init method gets removed and that's why that answer works, but it's destructive, it will remove all your manual changes in your projects.

And adding plugins as answer 2 suggests also works, but there is no need for doing that if using automatic plugin registration, that method is really there for non npm plugins.

Warplane

how do I know whether using automatic plugin registration ?, I have upgraded ionic vue project to capacitor 3 and added android platform again, but getting same error for Network plugin, there is no init method in MainActivity.java – Slog

If there is no init method then it will use the automatic registration. Make sure you have updated all capacitor dependencies to 3.0.0, you have installed the plugin and ran npx cap sync. Also try refreshing gradle with the sync button from android studio – Warplane

Answer 2

Try removing android platform (IMPORTANT: backup your android directory before removing.)

and run:

npm install @capacitor/core@next @capacitor/cli@next

npx cap init

npm install @capacitor/android@next

npx cap add android

then build your project and:

npx cap sync

Loculus

Thank you so much for your help - should have thought of that myself, but it solved my problem! – Intort

Thanks also from my side. Works like a charm. But why? (I didn't do any installs, as I had the right package versions already) Was it the new init? Or was it the npx commands are different to the ionic capacitor commands? – Philpot

Answer 3

I had the same problem

You need to add the plugins manually in your MainActivity.java

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // --- Remove bridge init as it's deprecated and add these lines
    registerPlugin(com.capacitorjs.plugins.app.AppPlugin.class);
    registerPlugin(com.capacitorjs.plugins.device.DevicePlugin.class);
    // ---
  }
}

Perichondrium

I have to register some community plugins in this fashion but getting an error in MainActivity that the symbols cannot be found in the import. Also a discussion on this in #68415974 – Busiek

Answer 4

When using live reload, make sure you have http:// in url.

As per documentation:

"server": {
  "url": "http://192.168.1.68:8100",
  "cleartext": true
},

When I used just ip, it rendered site, but plugins did not work (not implemented exception).

Outoftheway

Answer 5

As per doc, you just need to update MainActivity.java file

https://capacitorjs.com/docs/updating/3-0

Aquacade

Answer 6

I'm currently using Nx Monorepo with NxExt and Capacitor 4.0. I solved the import problem by adding in the package.json of the mobile app (apps/mobile-app/package.json) the relative plugins required:

{
  "name": "mobile-ionic-app",
  "dependencies": {
    "@capacitor/device": "^4.0.1"
  },
  "devDependencies": {
    "@capacitor/android": "^4.2.0",
    "@capacitor/cli": "^4.2.0",
    "@capacitor/core": "^4.2.0"
  }
}

In this way Capacitory can synchronize the plugins in the build phase:

Android Capacitor Build

Nonparticipating

Answer 7

This is because Capacitor changes the underlying Gradle files but Android Studio doesn't know about it

.

to fix this, go to Android studio click File -> Sync Project with Gradle Files

Teasley

Answer 8

In my case, i just need to update my MainActivity.java

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {}

Noreen

Answer 9

Using nxtend plugin I found that I also had to add the plugin package name to "includePlugins": [] in capacitor.config in order for sync to identify the needed plugins and populate the downstream gradle files in the android project. From what I understand cap is supposed to inspect the project package.json and automatically determine what plugins are used but this doesn't seem to be working for me.

Busiek