Error: Uncaught (in promise): overlay does not exist (ionic-selectable)

Question

I'm using ionic-selectable package github for products selection. I'm having error in console before opening the IonicSelectable in component.

ERROR Error: Uncaught (in promise): overlay does not exist
    at resolvePromise (zone.js:831)
    at zone.js:741
    at rejected (tslib.es6.js:71)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:17299)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
    at zone.js:889
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)

I'm not getting what's the problem that is raising that issue. I have used the package as described in instructions like in app.module.ts

import { IonicSelectableModule } from 'ionic-selectable';
@NgModule({
  imports: [
    IonicSelectableModule
  ]
})
export class AppModule { }

and in lazy loaded module like this

import { IonicSelectableModule } from 'ionic-selectable';
import { HomePage } from './home';
@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    IonicSelectableModule
  ]
})
export class HomePageModule { }

Here's my template

<ionic-selectable 
  #productListingComponent
  [isMultiple]="true"
  itemValueField="id"
  itemTextField="title"
  class="product_class"
  [items]="products"
  [canClear]="false"
  [isEnabled]="isEnable"
  [canSearch]="true"
  [canAddItem]="true"
  (onChange)="productChange($event)"
  (onOpen)="onOpen($event)"
  [addButtonText]="'Buttons.Add' | translate"
  [clearButtonText]="'Buttons.Clear' | translate"
  [closeButtonText]="'Buttons.Close' | translate"
  [confirmButtonText]="'Buttons.Confirm' | translate"
  [searchPlaceholder]="'Buttons.Search' | translate"
  (onAddItem)="addProduct($event.component)"
  #selectable>

<ng-template ionicSelectableHeaderTemplate>
      <ion-toolbar>
            <ion-buttons end>
                  <ion-button color="tertiary" fill="clear" (click)="productListingComponent.close()">
                  Cancel
                  </ion-button>
            </ion-buttons>
      </ion-toolbar>
      <ion-toolbar class="text-toolbar">
            <p> Some description</p>
      </ion-toolbar>
</ng-template>
<ng-template ionicSelectableCloseButtonTemplate>
      <p>Cancel</p>
</ng-template>
<ng-template ionicSelectableSearchFailTemplate>
      <div class="ion-padding">
            <p *ngIf="selectable.searchText; else noSearch">
                  No product available!
            </p>
            <ng-template #noSearch>
                  No product, go to your dashboard to add a new product!
            </ng-template>
      </div>
</ng-template>

</ionic-selectable>

In my package.json

{
  "name": "Ionic project",
  "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",
    "translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/en.json ./src/assets/i18n/nl.json ./src/assets/i18n/fr.json ./src/assets/i18n/de.json --clean --sort --format json -m translatable"
  },
  "husky": {
    "hooks": {
      "pre-commit": "ng lint"
    }
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0",
    "@angular/common": "^7.2.15",
    "@angular/core": "^7.2.15",
    "@angular/forms": "^7.2.15",
    "@angular/http": "^7.2.15",
    "@angular/platform-browser": "^7.2.15",
    "@angular/platform-browser-dynamic": "^7.2.15",
    "@angular/router": "^7.2.15",
    "@ionic-native/android-permissions": "^5.16.0",
    "@ionic-native/camera": "^5.16.0",
    "@ionic-native/chooser": "^5.16.0",
    "@ionic-native/core": "^5.16.0",
    "@ionic-native/device": "^5.16.0",
    "@ionic-native/file": "^5.16.0",
    "@ionic-native/file-transfer": "^5.16.0",
    "@ionic-native/geolocation": "^5.16.0",
    "@ionic-native/google-maps": "^5.5.0",
    "@ionic-native/ionic-webview": "^5.16.0",
    "@ionic-native/media-capture": "^5.16.0",
    "@ionic-native/splash-screen": "^5.16.0",
    "@ionic-native/status-bar": "^5.16.0",
    "@ionic/angular": "^4.11.4",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/pusher-js": "^4.2.2",
    "@types/socket.io-client": "^1.4.32",
    "angular2-signaturepad": "^2.9.0",
    "cordova-android": "^8.1.0",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.0.1",
    "cordova-plugin-add-swift-support": "^2.0.2",
    "cordova-plugin-android-permissions": "1.0.0",
    "cordova-plugin-camera": "4.1.0",
    "cordova-plugin-chooser": "1.2.5",
    "cordova-plugin-device": "2.0.3",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-file-transfer": "1.7.1",
    "cordova-plugin-geolocation": "4.0.2",
    "cordova-plugin-ionic-keyboard": "2.2.0",
    "cordova-plugin-ionic-webview": "4.1.1",
    "cordova-plugin-media-capture": "3.0.3",
    "cordova-plugin-splashscreen": "5.0.3",
    "cordova-plugin-statusbar": "2.4.3",
    "cordova-plugin-whitelist": "1.3.4",
    "cordova-sqlite-storage": "3.3.0",
    "core-js": "^2.6.10",
    "google-libphonenumber": "^3.2.6",
    "hammerjs": "^2.0.8",
    "ionic-selectable": "^4.4.1",
    "moment": "^2.24.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-moment": "^3.5.0",
    "pusher-js": "^4.4.0",
    "rxjs": "~6.3.3",
    "socket.io-client": "^2.3.0",
    "uuid": "^3.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "^7.3.9",
    "@angular/compiler": "^7.2.15",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "^7.2.15",
    "@biesbjerg/ngx-translate-extract": "^2.3.4",
    "@ionic/angular-toolkit": "~1.4.0",
    "@types/googlemaps": "^3.38.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^10.14.22",
    "codelyzer": "~4.5.0",
    "husky": "^1.3.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslib": "^1.10.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-chooser": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-geolocation": {},
      "cordova-plugin-device": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-file": {},
      "cordova-plugin-media-capture": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-sqlite-storage": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser",
      "ios",
      "android"
    ]
  }
}

If some could let me know how to resolve this issue will be highly appreciated

Answer 1

Your code looks fine, issue could be in your component class. The mentioned issue might appear due to inadequate usage of Ionic LoadingController, one common use case is when loader.dismiss() is executed before loader.present(), in this case same error occurs in console. You need to check whether this case is occuring in you application. Hope this will help.

Answer 2

Make sure you did not wrongly import the PopoverController instead of ModalController.

Answer 3

I had this issue as well and none of the other solutions worked for me. What did work is ensuring that the modal to be dismissed exists, then calling dismiss.

{
       const popover = await this.popoverCtrl.getTop();
        if (popover)
            await popover.dismiss(null);    
}

Answer 4

check once the both places ionic component and ionic page you imported ModalController or not in my case I wrongly imported the popOver instead of ModalController.

Answer 5

Recently, I was also getting the same error "Error: Uncaught (in promise): overlay does not exist".

Scenario: showing loader in ionic modal. Loader needs to be shown before getting data and dismiss it after receiving data.

When I debugged it, I have found out this.loadingCtrl.dismiss() was getting called before loader.present().

Sometimes, you might be having small data to load/process and by that time this.loadingCtrl.dismiss() can be get called.

The simplest solution worked for me is to add setTimeout() for dismissing the loader.

setTimeout({
  this.loadingCtrl.dismiss()
}, 100)

Answer 6

I had the same error and it was because I was calling popoverController.dismiss() while no popover was active.