Feedback on the Upgrade Guide for Capacitor 3

[imhoffd]

Please share feedback on the Upgrade Guide for Capacitor 3. We'd love to know how the upgrade went in your apps! Here's some ideas for comments:

• Did we miss anything?
• What went well? What went poorly?
• How long did it take you? Did you expect it to take longer or shorter?
• Was anything unclear or could be worded better?
• How are you liking Capacitor 3 so far? 😊

[najmulansari]

Dear Team,
After upgrading to Capacitor V3, encountered lots of errors and could not fix them due to plugins not available now.
Please see the below list.

LocalNotifications - Not able to reference from "@capacitor/core" also does not have any specific pkg to install.
PushNotification - Not able to reference from "@capacitor/core" also does not have any specific pkg to install.
ActionSheetOptionStyle - Not available in '@capacitor/action-sheet';

There are many more which it has affected. Could you please let me know if they can be fixed, or should I downgrade to V2.

Thank you.
Najmul

[imhoffd]

@najmulansari As a reminder, we haven't yet announced a public beta.

• LocalNotifications - follow this PR: Local Notifications capacitor-plugins#94
• PushNotifications - follow this PR: Push Notifications capacitor-plugins#126
• ActionSheetOptionStyle - I just pushed a fix for that here: ionic-team/capacitor-plugins@e026425

We tried to be careful with breaking changes, but you might be the second person ever (aside from myself) to upgrade an app to v3, so it may be a little rough at first. Any other issues you encountered?

Thank you!

[NunoSav]

I just upgraded my app to Capacitor 3.
It went smoothly and so far no issues.

Great work guys! 👍

[colinmac17]

Some quick feedback. Overall it works great when running normal builds, but when testing with live reload (at least on android), I am running into this error after following all setup instructions. Any ideas?

Notes: I am using Capacitor with create react app without Ionic. Screenshot below is from Android Emulator.

[craigrileyuk]

My upgrade mostly went fine, but I hit a problem on the Storage plugin and there's not much documentation to go on.

Uncaught (in promise) Error: "Storage.KEY_PREFIX()" is not implemented on web
CapacitorException index.js:157
get index.js:529
makeKey storage.js:53

I did see the note about running migrate(), but when I try that, I get the same message about Storage.migrate() not being implemented on web as well.

[imhoffd]

@colinmac17 I have an idea of what this might be, but it may be difficult to debug without a reproduction. Our testapp is also a CRA app and we ran into a similar issue before having to fix it.

---

@craigrileyuk Are you trying to access KEY_PREFIX in your app? It was removed.

• old: https://github.com/ionic-team/capacitor/blob/2.x/core/src/web/storage.ts#L9
• new: https://github.com/ionic-team/capacitor-plugins/blob/main/storage/src/web.ts

I guess I just realized KEY_PREFIX wasn't marked as private, but it should have been. We'll probably need to make a note of this in the upgrade guide, then.

[craigrileyuk]

I was previously using the Storage plugin with Vuex Persistence as a plugin.

/* Plugin.js */

import { Storage } from "@capacitor/storage";

    export const getItem = async (key) => {
        return Storage.get({
	        key,
        }).then((res) => {
	        if (res && res.value) return JSON.parse(res.value);
	        else return res.value;
        });
    };
    
    export const setItem = async (key, value) => {
        return Storage.set({
	        key,
	        value: JSON.stringify(value),
        });
    };
    
    export const clear = async () => {
        return Storage.clear();
    };
    
    export const removeItem = async (key) => {
        return Storage.remove({
	        key,
        });
    };

/* store/index.js */

....

import * as IonicStore from "./Plugin";
    
    const vuexUser = new VuexPersistence({
        key: "company_user",
        storage: IonicStore,
        asyncStorage: true,
        modules: ["user"],
        filter: (mutation) => {
	        return /^user/.test(mutation.type) === true;
        },
    });

const store = createStore({
            ...
        modules: {
	        user,
        },
        plugins: [vuexUser.plugin],
    });

I've abbreviated the code a fair bit, but that's the Capacitor code that's resulting in the error now.

[KirstenStake]

Update went smoothly for me with no issues. Thank you. look forward to testing this out!

[jansgescheit]

I had no problems upgrading to the new version. However, the following is different from version 2.

On Version 2, this works for me on the web platform, without a error log:

    ngOnInit(): void {
        this.platform.ready().then(async () => {
            if (Capacitor.isPluginAvailable('StatusBar')) {
                StatusBar.setStyle({
                    style: Style.Light,
                });
            }
            if (Capacitor.isPluginAvailable('SplashScreen')) {
                SplashScreen.hide();
            }
        });
    }

After Upgrading to Version 3, i got these error

core.js:4127 ERROR Error: Uncaught (in promise): Error: "StatusBar" plugin is not implemented on web
Error: "StatusBar" plugin is not implemented on web

Maybe i missed something in the Upgrade guide

[jcesarmobile]

Thanks, I've reported it here #4111

[salim7]

In general, capacitor 3 looks great so far. Thanks for the hard work!
However, there seems to be one incompatability with ionic-react's isPlatform method. When testing in the browser, isPlatform("hybrid") previously returned false, but now it returns true.

[salim7]

I changed it to isPlatform("capacitor") which seems to work now. The reason why isPlatform("hybrid") doesn't work anymore, is probably because getPlatforms() now wrongly returns "cordova".

[imhoffd]

Odd. isPlatform('hybrid') is working for me in our testapp.

[jansgescheit]

i have the same issue, but only on desktop browser

[KirstenStake]

[salim7]

Did you follow the Migration guide?

[salim7]

[salim7]

Additionally, App.addListener(‘backButton’, …) for Android doesn't overwrite default behavior. It seems to always perform a windows.history.back() which might not be intended in some cases.

[jcesarmobile]

can you report it on https://github.com/ionic-team/capacitor/issues and provide a sample app?

[gsglobalpro]

Did you find a solution?

[modemlooper]

I tried to upgrade but none of the Ionic Native plugins work, it says they are not installed but they are and every Capacitor plugin has an error saying ERROR "plugin is not implemented on web". I followed the upgrade guide am I missing something?

Changed all the imports:
import { App } from '@capacitor/app';
import { Network } from '@capacitor/network';
import { Keyboard } from '@capacitor/keyboard';
import { StatusBar } from '@capacitor/status-bar';
import { SplashScreen } from '@capacitor/splash-screen';

[modemlooper]

Got it to Xcode but when app loads: TypeError: Capacitor.createEvent is not a function. (In 'Capacitor.createEvent(type, data)', 'Capacitor.createEvent' is undefined)

[modemlooper]

So, the upgrade guide did not work fo me at all. I tried follow it 3 times and same results; tons of errors. My path was to delete the android and iOS folders and reinstall using @next for everything and it loads. Some of the Cordova Plugins do not work now.

[imhoffd]

Would you be willing to share your app with us?

[imhoffd]

@modemlooper I was able to get the cordova-plugin-streaming-media plugin working in Capacitor 3. If you could provide more details on the errors you're seeing, that would be helpful

[modemlooper]

Streaming media worked after I deleted and reinstalled each platform. Some other ionic native plugins did not work. specifically this one: https://ionicframework.com/docs/v3/native/android-exoplayer/

[MortenGregersen]

We inject Capacitor in our Angular components, to easier mock it out in tests.

Up until now we've created the token this way:

import { Capacitor } from '@capacitor/core/dist/esm/definitions';
export const CAPACITOR_TOKEN = new InjectionToken<Capacitor>('Capacitor');

However, the path to the definition and the definition itself is no longer available after upgrading to Capacitor 3.0. The step here is missing in the guide. My best guess of how to continue is to do this:

import { CapacitorGlobal } from '@capacitor/core';
export const CAPACITOR_TOKEN = new InjectionToken<CapacitorGlobal>('Capacitor');

Can somebody verify that this is the correct way?

[imhoffd]

I think generally any time you import from a path within a module (such as /dist/esm/definitions) it's considered an internal API if it's not documented, so I'm not sure if it makes sense in the upgrade guide. I'll watch and see if it's a common issue, though.

Yes, you could use CapacitorGlobal for that. We won't change types in 3.x because it will break app builds. You can also do this, if you want:

import type { Capacitor } from '@capacitor/core';
export const CAPACITOR_TOKEN = new InjectionToken<typeof Capacitor>('Capacitor');

[MortenGregersen]

Thank you @dwieeb!

We also have another InjectionToken for PluginRegistry used in many places to access our own plugins. How should they be imported now?

[jcesarmobile]

PluginRegistry Should also be in core, but note that is legacy now, should not be used

[MortenGregersen]

So how should we access our custom plugins now that PluginRegistry is deprecated?

[jh-gh]

I have run into issues with community plugins after upgrading to Capacitor 3.
Specifically, I am using the following community plugins:

• firebase-analytics
• firebase-crashlytics

After upgrading to Capacitor 3 ... I got build errors in iOS because Capacitor 3 requires an iOS Deployment target of 12 ... and these plugins specify a deployment target of 11 (and they import Capacitor).
I was able to temporarily hack it to build by editing the .podspec files for the plugins to specify a deployment target of 12 and re-running pod install.
However, this isn't a realistic solution as it requires editing the files that get installed under node_modules with the plugins

Do you have any suggestions on how to handle this?

I guess ideally the community plugins would get updated and re-released with a target of 12. But if that hasn't happened yet ... is there any other way to work around this?

Thanks.

[jcesarmobile]

You can add something like this in your Podfile

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.0'
    end
  end
end

[jh-gh]

@jcesarmobile Perfect! Thanks for the quick reply.

[jh-gh]

The solution suggested by @jcesarmobile works for iOS.

However, I am unable to build for Android with these 2 community plugins (firebase-analytics/firebase-crashlytics).

I get compile errors:

The project builds fine for Android with Capacitor 2 but gets these compile errors after upgrading to Capacitor 3.

Are these existing plugins expected to be compatible with Capacitor 3? Or do the plugins themselves need to be updated?

[jh-gh]

After upgrading from Capacitor 2 to 3, my app fails on iOS when it tries to access the Cordova secure storage plugin.
This is an Ionic/Angular app that uses the ionic native wrapper to access the secure storage plugin.
This works fine on Capacitor 2. However, with Capacitor 3, the ionic native wrapper throws an error saying "plugin_not_installed".

If I check window.cordova.plugins.SecureStorage ... it is set to null (not undefined but null).
Again, this works fine on Capacitor 2 (and the secure storage plugin IS installed).

Any idea why this plugin would not be available when running with Capacitor 3?

Thanks.

[jh-gh]

I have managed to work around this issue with the Cordova secure storage plugin by upgrading to a newer version of that plugin.

I'm not sure why this was necessary ... and it may indicate that there is some issue with Capacitor 3 that warrants further investigation as this may affect other plugins.

For the record:

• app was using cordova-plugin-secure-storage@2.6.8
• this worked fine with Capacitor 2
• upgraded to Capacitor 3
• app could no longer access the secure storage plugin on iOS
• window.cordova.plugins.SecureStorage was null
• upgraded to latest plugin at cordova-plugin-secure-storage-echo@5.1.1
• this resolved the issue
• also tried latest version of the original plugin at cordova-plugin-secure-storage@3.0.2
• this also resolved the issue
• both of these newer plugins contain updated code in securestorage.js ... so perhaps this is why the newer versions work ... but not clear why the older versions still worked with Capacitor 2 but don't work with Capacitor 3

[jh-gh]

I have an Ionic V3 app which I have successfully ported from Cordova to Capacitor.

I am currently unable to upgrade the app to Capacitor 3 because Capacitor 3 requires Node 12 and Typescript 3.8+

The Ionic V3 app uses ionic-app-scripts to build. The latest official version of ionic-app-scripts (3.2.4) pegs the version of node-sass to 4.10.0 and this does not work on Node 12 (fails to install). Beyond that, ionic-app-scripts pegs the version of Typescript to 2.4.2 which will not work with Capacitor 3.

Is it feasible to upgrade an Ionic V3 based app to Capacitor 3?

Longer term, I want to migrate the app to Ionic V5 ... but that is a major undertaking that I don't have time/budget for at the moment.

Is there any version of ionic-app-scripts (official or otherwise) that would support building for Capacitor 3? I see that there are a huge number of forks (281) of that repo ... but have no idea what any of them contain.

Thanks.

[qanuj]

After upgrading I started getting this build failure for all of the capacitor core plugins.

first issue

Error: node_modules/@capacitor/keyboard/dist/esm/definitions.d.ts:2:16 - error TS2665: Invalid module name in augmentation. Module '@capacitor/cli' resolves to an untyped module at 'D:/e10/boltnews-mobile/boltnews/node_modules/@capacitor/cli/dist/index.js', which cannot be augmented.

2 declare module '@capacitor/cli' {
~~~~~~~~~~~~~~~~
same for all other plugins.

second issue

❯ npx cap sync android
√ Copying web assets from www to android\app\src\main\assets\public in 743.76ms
× Copying native bridge: ENOENT: no such file or directory, lstat 'D:\e10\boltnews-mobile\boltnews\node_modules@capacitor\core\native-bridge.js'
× copy: ENOENT: no such file or directory, lstat 'D:\e10\boltnews-mobile\boltnews\node_modules@capacitor\core\native-bridge.js'
[error] [Error: ENOENT: no such file or directory, lstat 'D:\e10\boltnews-mobile\boltnews\node_modules@capacitor\core\native-bridge.js'] {
errno: -4058,
code: 'ENOENT',
syscall: 'lstat',
path: 'D:\e10\boltnews-mobile\boltnews\node_modules\@capacitor\core\native-bridge.js'
}

after getting passed above

RROR Error: Uncaught (in promise): Error: "App" plugin is not implemented on android
Error: "App" plugin is not implemented on android

[jcesarmobile]

Doesn’t look like you updated all capacitor packages.

[mpat8121]

I'm creating a plugin using capacitor 3 that allows Google Fit integrations.

The issue I've run into specifically for cap 3 is that the Android onActivityResult override function no longer applies - only the callback function parameter in startActivityForResult.

To request permissions for Google Fit, the plugin must call GoogleSignIn.requestPermissions() which is a void function that fires the onActivityResult override.

It doesn't look like the changes to requesting permissions applies to this case either so using the @PermissionCallback pattern won't help.

How does this fit into the new capacitor structure for Android hook into the result of this request when an activity is triggered like this?

Thanks.

[jcesarmobile]

onActivityResult is deprecated, I guess they'll update their SDK to not use it in the future.

But on the meantime, you'll have to keep using the deprecated NativePlugin annotation as it will call onActivityResult instead of the new annotation and API.

[HarshaKosala]

Hi,

We have written custom plugins for both iOS and Android. I can see document saying custom plugin update guide is still in progress. Any update related to this or how we can update the custom plugins.

[jcesarmobile]

Have you found any issue updating the plugin following the guide?

[HarshaKosala]

Hi @jcesarmobile, didn't update to 3.0 since plugin update guide showing as work-in-progress. What i did was wrote the plugins again after update capacitor to 3.0. Can i directly upgrade plugins to 3.0 ?

[jcesarmobile]

Well, there might be some things missing and that's why it's still a work in progress, since nobody has given any feedback about it we don't know if everything is ok or if nobody tried.
But yeah, it's probably easier to create a new plugin and copy the classes than making all the changes.

[Nasicus]

Hey

For us the general update an the android, on ios it also worked pretty well, but then when I tried to run the app on ios we always got something like "This plugin is not implemented on ios".

After a lot lot of searching I find out that in my Podfile all official plugins were NOT added automatically - even after I normally installed them via npm i @capacitor/device (as an example) and running npx cap sync ios.
After I manually added one like this it now seems to work (not done testing / adding all plugins yet).

  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'

If it helps that's the output of npx cap sync ios:

❯ npx cap sync ios                                                             
✔ Copying web assets from build to ios/App/App/public in 334.56ms              ✔ Creating capacitor.config.json in ios/App/App in 691.46μp                    
⠧ copy ios [info] Found 1 Cordova plugin for ios:                                     com-sarriaroman-photoviewer@1.2.4                                       
✔ copy ios in 418.38ms                                                         ✔ Updating iOS plugins in 19.06ms
[info] Found 13 Capacitor plugins for ios:                                                                     @capacitor/app@1.0.2          
       @capacitor/browser@1.0.2          @capacitor/device@1.0.2 
       @capacitor/keyboard@1.0.2       @capacitor/network@1.0.2
       @capacitor/share@1.0.3       @capacitor/splash-screen@1.1.0
       @capacitor/status-bar@1.0.2           @capacitor/storage@1.0.3                                                
       app-info@0.0.1                                      msal-client@0.0.1                            
       openid-client@0.0.1                                 push-client@0.0.1                            
[info] Found 1 Cordova plugin for ios:                     com-sarriaroman-photoviewer@1.2.4                                                                
✔ Updating iOS native dependencies with pod install in 5.29s                                            ✔ update ios in 5.35s                               
[info] Sync finished in 5.772s        

=> as you can see we also have quite a few custom plugins... (however these were already in the Podfile before the upgrade obviously).

Any hint what I did wrong? or is this a bug in capacitor?

---

edit:
Even tested this on a complete vanilla / fresh project with CRA and capacitor it didn't add it to the Podfile.
However note that for this new plugin I only did this on windows and not on a Mac (but the original steps described above, I did on a Mac)

[Nasicus]

ok I just tried the vanilla Podfile on mac and there it does indeed add it with npx cap sync ios - so I guess I will adjust the format accordingly :)

But maybe something which should be added to the guide?

[jcesarmobile]

yeah, that's it, you must have created your app with Capacitor 1 beta, because the Podfile didn't look like that on 1.0.0 final.
https://github.com/ionic-team/capacitor/blob/main/ios-template/App/Podfile

When you are on Windows, npx cap sync skips most things since you can't build the apps from there and you can't install CocoaPods on windows.

[Nasicus]

@jcesarmobile I see! That's very possible, we used capacatior in a very early stage :)

Just checked:

    "@capacitor/android": "^1.0.0-beta.7",
    "@capacitor/cli": "^1.0.0-beta.7",
    "@capacitor/core": "^1.0.0-beta.7",
    "@capacitor/ios": "^1.0.0-beta.7",

... that's where we started ;) :D

[atomassoni]

This got me so good! I finally found the solution in the iOS troubleshooting guide... but it took 2 solid days to try to figure it out! I'm glad I did. Can you put this into the iOS upgrade guide? It would have saved a lot of effort, since the old Podfile still worked with Capacitor 2.

[jcesarmobile]

The upgrade guide is for upgrading from 2 to 3, this is for beta to 1 and we have no such guide, I think the troubleshooting doc is enough

[jansgescheit]

i can't upgrade from v2 to v3 because i have this Storage misbehavior ionic-team/capacitor-plugins#541

[arnotixe]

yay, kursfortegnelse.no web+android+ios app just upgraded to 3.0! 🎉

Only problem I had was the unsupported barcode-scanner. With a little code rewrite I was able to build in the @capacitor-community/barcode-scanner, although it is a bit behind the ionic-native barcode scanner:

• does not support torch toggling (yet). This is the only major pain point since my users tend to work in the dark (construction, 6months of darkness near north pole etc). It is a blocker for updating my other app Fellesverktøy to 3.0 too.

Good thing it's implemented both for android and ios, torch an all. in the works capacitor-community/barcode-scanner#34

• has no scanner UI (at least I could not find one?). On the upside, that made it possible to write a custom UI for my app. Could be a good thing. There's a scanner UI on the github page.
• no function for cycling among cameras back/front/others. Not a big issue for me at the moment.

This is how the @ionic-native/barcode-scanner/ngx looked like, sadly not compatible with capacitor3.

[thmclellan]

As part of migration I've been upgrading an internal plugin to v3... some quick feedback:

• For both Android and iOS, I found it easier to generate a new custom plugin and then copy over my plugin functions

• With @NativePlugin and registerClass I was getting an "Error: X plugin is not implemented on android". I'm not sure the root cause, I noticed some others with this error were also using Sentry. Instead of troubleshooting, moving to @CapacitorPlugin fixed the issue.

• From the docs, it wasn't clear to me if I could use @CapacitorPlugin and still use the older permission style (with handleRequestPermissionsResult and request code) or if that was only available when using depecrated @NativePlugin. It didn't seem to work so I moved to the @Permission model and that worked well.

A huge thanks to the core team for the 3.0 changes (decoupling core plugins is brilliant) and for the quality of docs and support. 🎉 Given the scope of changes, it was a really smooth migration path.

The Capacitor philosophy of letting me manage Xcode and Android Studio files directly as native project components made this migration easier too... I've got a couple of custom iOS extensions in my xcode workspace that send files to my custom Capacitor plugin, and I didn't need to touch them. 😀

[pdrhlik]

I migrated my project about a month ago and it went really smoothly. Everything makes a lot more sense now, so thanks a lot for this amazing work!

The only issue I had was with Android 11 devices. But the fun part is that only with some. When the app started, some users reported that it showed the splash screen for quite some time and then it just turned white. The only thing that helped was to change the variables.gradle's compileSdkVersion and targetSdkVersion to 29. The issue was only present when the target API was set to 30 (Android 11).

Has anyone experienced anything similar? I don't really know what might have wrong because I was unable to reproduce it. I don't have an Android 11 phone but I tried Android 11 emulator and the app was working smoothly.

[pdrhlik]

In case anyone is facing the same issue, I finally figured out the root of the problem. It has to do with a cordova-sqlite-storage. If you use this plugin and want to target sdk 30, you need to update it to version 6.0.0 as per this issue: storesafe/cordova-sqlite-storage#954.

[Sibi4]

[Sibi4]

import { LocalNotifications } from "@capacitor/local-notifications"; seems to be the right way of importing

[Sibi4]

Could someone please tell me how to install Background Task plugin in Capacitor v3? I cannot find it in the official documentation: https://capacitorjs.com/docs/apis

[bram96]

After upgrading to capacitor 3 I'm getting {"code":"UNIMPLEMENTED"} in the debug log in XCode on Storage.set have followed the upgrade documentation as far as I can see. Does anyone have an idea what could cause this?

Storage.set({ key: 'apiEndpoint', value: this.form.value.apiEndpoint })
                .then(() => this.login())
                .catch(x => console.error(x));

[SalvadorAngel]

Update the storage plugin to last version

[bram96]

I've installed @capacitor/storage version 1.2.0 as far as I can see this is the newest version. All other capacitor packages in my package.json are the latest versions as well.

[Nasicus]

@bram96 checkout this, maybe it's the same issue:
#3994 (comment) (basically the podfile was wrong)

[bram96]

@Nasicus thanks a lot, that was the issue indeed. I started using capacitor before version 1

[sebsoftpak]

Has anyone succeeded in getting Capacitor 3 + AppFlow working on Android?
When I add AppFlow to a blank Capacitor 3 project, the following error occurs on start of the app: "Uncaught SyntaxError: Unexpected token )"

[mdweyal]

Hello friends,
I use capacitor 3 with storage plugin, it works with ionic serve in browser but not in android device.
import { Storage } from '@capacitor/storage';
can anyone face the same problem?

[johnson512n28]

I spent a whole day rebuilding my custom plugin and our app for Android in various ways only to find the decorator name needs to match something particular. The docs say "the name is the same," but I didn't have a name in the @NativePlugin decorator and assumed I needed to add it...

Can anyone confirm if it should match the registered class in index.ts, or how exactly does this work?

MyPlugin.java:

@CapacitorPlugin( name = "MyPluginName" )
public class MyPlugin extends Plugin ...

Should match index.ts:

import { registerPlugin } from '@capacitor/core';
import type { MyPlugin } from './definitions';

const MyPluginReference = registerPlugin<MyPlugin>(
    'MyPluginName',
    {
        web: () => import('./web').then(m => new m.MyPluginWeb()),
    },
);

export * from './definitions';
export { MyPluginReference }

[thmclellan]

@johnson512n28 I found it easier to create a new plugin and then migrate everything into it. I troubleshooted @NativePlugin for a while but eventually gave up and migrated to @CapacitorPlugin.

In my working version, in src/index.ts, I'm using the same plugin name for both the string name and exported plugin reference as follows:

TestPlugin.java

@CapacitorPlugin(name = "MyTest")
public class MyTestPlugin extends Plugin ...

src/index.ts

import { registerPlugin } from '@capacitor/core';

import type { MyTestPlugin } from './definitions';

const MyTest = registerPlugin<MyTestPlugin>('MyTest', {
  web: () => import('./web').then(m => new m.MyTestWeb()),
});

export * from './definitions';
export { MyTest };

src/definitions.ts:

export interface MyTestPlugin { 
  exampleFunction()... 
} 

[marracuene]

FIXED

Original Problem

We are trying to upgrade from 2.4.2 to 3.3.3, in an Angular 12/Ionic 5 app.

• upgrading from Gradle 5.6.4 to 7.x (as the guide recommends but does not require) causes the capacitor build to break. Upgrading to 6.9.2 does not cause problems
• using the new plugins approach we are still hitting a roadblock. We only use the Share plugin.
  - we use the new syntax import { Share } from '@capacitor/share' and the TS compile works OK, but on Android we get the "plugin 'Share' is not implemented on Android' message
  - package.json: "@capacitor/share": "^1.1.0"
  - when we run npx cap sync android, the output reports Found 0 Capacitor plugins for android:
  - same thing if we rm -rf our android dir and do npx cap add android
  - when we run the build, we can see that the Java source inside the share plugin, is not built to any of the build output dirs

It seems like there is some config file where we need to manually list the plugins we want, so that Capacitor includes them, any suggestions?

• we also have the below error, which many have reported:

Copying native bridge: ENOENT: no such file or directory, lstat '/.workspace/lixo/node_modules/@capacitor/core/native-bridge.js'
✖ copy: ENOENT: no such file or directory, lstat '/.workspace/lixo/node_modules/@capacitor/core/native-bridge.js'
[error] [Error: ENOENT: no such file or directory, lstat '/.workspace/lixo/node_modules/@capacitor/core/native-bridge.js'] {

We can workaround this by soft-linking from the new location of native-bridge.js to the new location.

Solution

1. We had @capacitor/cli 2.4.3 installed globally. npm list -g claimed we didn't, but looking in /opt/node/lib/node_modules, there it was. Removed it manually, along with related softlinks that npm installs. The really safe way to do it is to specify the capacitor version ever time you run a command - this is slow though, for instance: npx @capacitor/cli@3.3.3 sync .
2. We are using nx with nxtend, and we had not specified the plugin package in the android-app package.json. See https://nxtend.dev/docs/capacitor/getting-started/#adding-capacitor-plugins . This used not to be necesary with nxtend, but now it is. So we have:
   project_root/package.json: (where the TS code compiles against)

   "dependencies": {
     ...
   "@capacitor/share": "^1.1.0",
   ...
    }
   

   AND
   project_root/apps/thisapp/package.json: (where capacitor looks)

"dependencies": {
    "@capacitor/share": "^1.1.0"
  }

[meidikawardana]

I have a problem with CapacitorGoogleMaps... In v2 it was ok but importing CapacitorGoogleMaps from @capacitor-community/capacitor-googlemaps-native give me issues reported by user. So I'm trying to use CapacitorGoogleMaps using v2's method:

import { Plugins } from '@capacitor/core';
const { CapacitorGoogleMaps } = Plugins;

But it results in this error:
TypeError: undefined is not an object (evaluating 'CapacitorGoogleMaps.addListener')
I'm using the oldest stable v3 packages as possible:

"@capacitor/core": "3.0.0",
"@capacitor/ios": "3.0.0",
"@capacitor/android": "3.0.0",
"@capacitor/cli": "3.0.0"

Please help, can I really use CapacitorGoogleMaps the v2 way when I'm using v3?

[rengadevigg]

after updating capacitor 2 to capacitor 3 My ui change is not triggering properly and misbehaving and hardware back button is not working why?

valid ionic mode: "“ios”", expected: "ios" or "md"
and
navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?
Got this warning..