Uncaught TypeError: Object(...) is not a function in the browser

Question

I'm trying to use Ionic Image Loader for Image Loading and caching. There is no error at the time of compiling but in the browser, it shows the following error. I'm pasting details from my package.json file. I'm new to ionic and angular. Please let me know how to fix this issue.

Uncaught TypeError: Object(...) is not a function  at index.js:1193 
at Module../node_modules/@ionic-native/file/index.js (index.js:1370) 
at __webpack_require__ (bootstrap:84) at Module../node_modules/ionic-image-loader/dist/image-loader.module.js (image-loader.module.js:1)    
at __webpack_require__ (bootstrap:84) at Module../node_modules/ionic-image-loader/dist/index.js (index.js:1) at __webpack_require__ (bootstrap:84)  
at Module../src/app/app-routing.module.ts (main.js:494) 
at __webpack_require__ (bootstrap:84) 
at Module../src/app/app.module.ts (app.component.ts:12)

My package.json looks like below

    {
  "name": "blank",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0-beta.14",
    "@ionic-native/file": "^4.20.0",
    "@ionic-native/file-transfer": "^5.20.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "cordova-plugin-file": "6.0.2",
    "core-js": "^2.5.4",
    "ionic-image-loader": "^6.3.3",
    "rxjs": "^6.5.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-file": {}
    }
  }
}

Answer 1

This is most likely because of a version mismatch.

The current version of ionic-image-loader does not yet support v5 of @ionic-native/file but there is a beta version available which does support it.

Make sure that all @ionic-native/* packages are on the same major version. Use v5 if you want to use the beta version, otherwise use v5 and the latest stable version of ionic-image-loader.