@ionic-native/base64 and @ionic-native/file-picker are not working in Ionic 7 – How to fix?

Ionic Framework Ionic Angular
1

Hi all,

I recently upgraded my project to Ionic 7, and I’m trying to use Base64 and IOSFilePicker. Previously, I was able to import them like this:

import { Base64 } from '@ionic-native/base64/ngx';
import { IOSFilePicker } from '@ionic-native/file-picker/ngx';

However, after the upgrade, I can no longer import these modules. I’ve read that @ionic-native/* plugins have been deprecated and replaced by @awesome-cordova-plugins/*, so I tried updating them:

Steps I took:

  1. Installed the new plugins:
npm install @awesome-cordova-plugins/base64
npm install @awesome-cordova-plugins/file-picker
  1. Added the necessary Cordova plugins:
ionic cordova plugin add cordova-plugin-file
ionic cordova plugin add cordova-plugin-filepicker
  1. Updated my app.module.ts to register the providers:
import { Base64 } from '@awesome-cordova-plugins/base64/ngx';
import { IOSFilePicker } from '@awesome-cordova-plugins/file-picker/ngx';

@NgModule({
  providers: [
    Base64,
    IOSFilePicker
  ]
})

The Problem:

  • When trying to import Base64 and IOSFilePicker, I get a “Module not found” error.
  • I also encountered an RxJS compatibility issue after upgrading.

image
image1018×383 12 KB

“@ionic/angular”: “^7.0.0”,
“rxjs”: “~7.8.0”,

2

Did you replace all @ionic-native/* packages with @awesome-cordova-plugins/*? Specifically double check for @ionic-native/core.

3

Yes, most @ionic-native/* packages have been replaced with @awesome-cordova-plugins/*, including @awesome-cordova-plugins/core.

4

You say “most”. Hopefully all? You will most likely run into issues if they aren’t all switched. Please share your package.json file. It still sounds like a package version mismatch.

5

Yes, I have updated everything. You can review the file content below.

{
“name”: “MobilPort”,
“version”: “4.51.002”,
“author”: “Ionic Framework”,
“homepage”: “https://ionicframework.com/”,

“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“watch”: “ng build --watch --configuration development”,
“test”: “ng test”,
“lint”: “ng lint”
},
“private”: true,
“dependencies”: {
“@angular/animations”: “^16.0.0”,
“@angular/common”: “^16.0.0”,
“@angular/compiler”: “^16.0.0”,
“@angular/core”: “^16.0.0”,
“@angular/forms”: “^16.0.0”,
“@angular/platform-browser”: “^16.0.0”,
“@angular/platform-browser-dynamic”: “^16.0.0”,
“@angular/router”: “^16.0.0”,
“@awesome-cordova-plugins/android-permissions”: “^6.14.0”,
“@awesome-cordova-plugins/background-mode”: “^6.14.0”,
“@awesome-cordova-plugins/calendar”: “^6.14.0”,
“@awesome-cordova-plugins/call-number”: “^6.14.0”,
“@awesome-cordova-plugins/camera”: “^6.14.0”,
“@awesome-cordova-plugins/core”: “^6.14.0”,
“@awesome-cordova-plugins/device”: “^6.14.0”,
“@awesome-cordova-plugins/dialogs”: “^6.14.0”,
“@awesome-cordova-plugins/email-composer”: “^6.14.0”,
“@awesome-cordova-plugins/file”: “^6.14.0”,
“@awesome-cordova-plugins/file-chooser”: “^6.14.0”,
“@awesome-cordova-plugins/file-path”: “^6.14.0”,
“@awesome-cordova-plugins/http”: “^6.14.0”,
“@awesome-cordova-plugins/image-picker”: “^6.14.0”,
“@awesome-cordova-plugins/in-app-browser”: “^6.14.0”,
“@awesome-cordova-plugins/ionic-webview”: “^6.14.0”,
“@awesome-cordova-plugins/keyboard”: “^6.14.0”,
“@awesome-cordova-plugins/launch-navigator”: “^6.14.0”,
“@awesome-cordova-plugins/mobile-accessibility”: “^6.14.0”,
“@awesome-cordova-plugins/native-storage”: “^6.14.0”,
“@awesome-cordova-plugins/network”: “^6.14.0”,
“@awesome-cordova-plugins/photo-library”: “^6.14.0”,
“@awesome-cordova-plugins/photo-viewer”: “^6.14.0”,
“@awesome-cordova-plugins/push”: “^6.14.0”,
“@awesome-cordova-plugins/screen-orientation”: “^6.14.0”,
“@awesome-cordova-plugins/sms-retriever”: “^6.14.0”,
“@awesome-cordova-plugins/splash-screen”: “^6.14.0”,
“@awesome-cordova-plugins/status-bar”: “^6.14.0”,
“@ionic/angular”: “^7.0.0”,
“@ionic/cordova-builders”: “^10.0.0”,
“@ionic/storage-angular”: “^4.0.0”,
“@ngx-formly/core”: “^6.3.12”,
“@ngx-formly/ionic”: “^6.3.12”,
“@ngx-formly/schematics”: “^6.3.12”,
“angular-mentions”: “^1.5.0”,
“cordova-android”: “13.0.0”,
“default-passive-events”: “^2.0.0”,
“ionic-input-mask”: “^1.0.1”,
“ionicons”: “^7.0.0”,
“moment”: “^2.30.1”,
“ng-zorro-antd-mobile”: “^10.0.0”,
“ngx-extended-pdf-viewer”: “^19.6.0”,
“ngx-mask”: “^16.4.2”,
“rxjs”: “~7.8.0”,
“swiper”: “^11.2.4”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.13.0”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “^16.0.0”,
“@angular-eslint/builder”: “^16.0.0”,
“@angular-eslint/eslint-plugin”: “^16.0.0”,
“@angular-eslint/eslint-plugin-template”: “^16.0.0”,
“@angular-eslint/schematics”: “^16.0.0”,
“@angular-eslint/template-parser”: “^16.0.0”,
“@angular/cli”: “^16.0.0”,
“@angular/compiler”: “^16.0.0”,
“@angular/compiler-cli”: “^16.0.0”,
“@angular/language-service”: “^16.0.0”,
“@ionic/angular-toolkit”: “^9.0.0”,
“@types/jasmine”: “~4.3.0”,
“@types/node”: “^12.11.1”,
“@typescript-eslint/eslint-plugin”: “5.3.0”,
“@typescript-eslint/parser”: “5.3.0”,
“call-number”: “^1.0.1”,
“com-badrit-base64”: “^0.2.0”,
“cordova-plugin-advanced-http”: “^3.3.1”,
“cordova-plugin-androidx”: “^3.0.0”,
“cordova-plugin-androidx-adapter”: “^1.1.3”,
“cordova-plugin-background-mode”: “^0.7.3”,
“cordova-plugin-camera”: “^8.0.0”,
“cordova-plugin-crop”: “^0.4.0”,
“cordova-plugin-datepicker”: “^0.9.3”,
“cordova-plugin-device”: “2.0.2”,
“cordova-plugin-email-composer”: “^0.10.1”,
“cordova-plugin-file”: “^8.1.3”,
“cordova-plugin-filechooser”: “^1.2.0”,
“cordova-plugin-filepath”: “^1.6.0”,
“cordova-plugin-filepicker”: “^1.1.6”,
“cordova-plugin-inappbrowser”: “^6.0.0”,
“cordova-plugin-ionic-keyboard”: “^2.0.5”,
“cordova-plugin-ionic-webview”: “^5.0.0”,
“cordova-plugin-iroot”: “^3.1.0”,
“cordova-plugin-network-information”: “github:apache/cordova-plugin-network-information”,
“cordova-plugin-proguard”: “^2.2.0”,
“cordova-plugin-screen-orientation”: “^3.0.4”,
“cordova-plugin-sms-retriever-manager”: “^1.0.5”,
“cordova-plugin-splashscreen”: “5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-telerik-imagepicker”: “github:VerianMobile/ImagePicker”,
“cordova-plugin-transport-security”: “^0.1.2”,
“es6-promise-plugin”: “^4.2.2”,
“eslint”: “^7.26.0”,
“eslint-plugin-import”: “2.22.1”,
“eslint-plugin-jsdoc”: “30.7.6”,
“eslint-plugin-prefer-arrow”: “1.2.2”,
“jasmine-core”: “~4.6.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.4.0”,
“karma-chrome-launcher”: “~3.2.0”,
“karma-coverage”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “~5.1.0”,
“karma-jasmine-html-reporter”: “~2.0.0”,
“mx.ferreyra.callnumber”: “^0.0.2”,
“phonegap-plugin-mobile-accessibility”: “^1.0.5”,
“ts-node”: “^8.3.0”,
“typescript”: “~5.0.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
},
“cordova-plugin-ionic-keyboard”: {},
“cordova-plugin-sms-retriever-manager”: {
“PLAY_SERVICES_VERSION”: “15.0.1”
},
“cordova-plugin-camera”: {
“ANDROID_SUPPORT_V4_VERSION”: “27.+”,
“ANDROIDX_CORE_VERSION”: “1.6.+”
},
“cordova-plugin-advanced-http”: {
“ANDROIDBLACKLISTSECURESOCKETPROTOCOLS”: “SSLv3,TLSv1”
},
“cordova-plugin-screen-orientation”: {},
“cordova-plugin-proguard”: {},
“cordova-plugin-androidx”: {},
“cordova-plugin-androidx-adapter”: {},
“cordova-plugin-iroot”: {},
“cordova-plugin-datepicker”: {},
“mx.ferreyra.callnumber”: {},
“phonegap-plugin-mobile-accessibility”: {},
“cordova-plugin-filechooser”: {},
“cordova-plugin-file”: {},
“cordova-plugin-filepath”: {},
“com-badrit-base64”: {},
“cordova-plugin-filepicker”: {},
“cordova-plugin-email-composer”: {},
“cordova-plugin-inappbrowser”: {},
“cordova-plugin-background-mode”: {},
“cordova-plugin-crop”: {},
“cordova-plugin-transport-security”: {},
“cordova-plugin-telerik-imagepicker”: {
“ANDROID_SUPPORT_V7_VERSION”: “27.+”
},
“call-number”: {}
},
“platforms”: [
“android”
]
}
}