Modals not useable with Ionic pwa-elements and Ionic v3

[gubbigubbi]

Stencil version:
No stencil added to project

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
I am trying to use PWA elements in an Ionic (v3.9.6) app and its working great. I have added the script via my index.html.

However any modal is now rendered unclickable. Also not visible on smaller screens.

When removing the PWA elements script the modals work.

Expected behavior:
The modals should work correctly.

Steps to reproduce:

1. Start Ionic v3 project
2. Add PWA elements
3. Attempt to use Modal

Related code:
I was also able to render the modal on mobile by adding this SCSS

@media all and (max-width: 767px) {
  .modal-wrapper {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

Other information:
You can view the issue here:
http://www.giphy.com/gifs/S3P43BsZaFCh53gzOR

[mlynch]

Are you running PWA Elements 1.2.0?

[gubbigubbi]

Yes my package.json is:

  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/fire": "^5.1.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@capacitor/cli": "1.0.0-beta.24",
    "@capacitor/core": "1.0.0-beta.24",
    "@firebase/polyfill": "^0.3.14",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/firebase": "^4.7.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/pwa-elements": "^1.2.0",
    "@ionic/storage": "^2.2.0",
    "angular2-moment": "^1.8.0",
    "firebase": "^6.0.2",
    "ionic-angular": "^3.9.6",
    "ionicons": "3.0.0",
    "lodash": "^4.17.5",
    "ng2-smart-table": "^1.3.5",
    "randomstring": "^1.1.5",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.5.2",
    "sw-toolbox": "3.6.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.3",
    "ng2-completer": "^2.0.8",
    "typescript": "3.2.4"
  },

[mlynch]

Okay taking a look

[mlynch]

Was able to reproduce

[mlynch]

This was related to an old build file still being referenced. However, we're fixing something else in our build system Stencil to resolve a related issue. Stand by.

[gubbigubbi]

Thank you @mlynch you all are doing a fantastic job. I can just switch to using a page over a modal for now.

[mlynch]

Thanks. This is fixed in the latest so going to close!

[gubbigubbi]

Thank you - the issue with the modal not being clickable is fixed. However I cannot use the Capacitor camera plugin now I get this error:

Uncaught (in promise): TypeError: cameraModal.componentOnReady is not a function

In my index.html I have included pwa-elements as follows:
<script src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements.js"></script>

I tried to change this to:
<script src="https://unpkg.com/@ionic/pwa-elements@1.2.5/dist/ionicpwaelements.js"></script>

But I still get the same issue.

[gubbigubbi]

Disregard my last comment this is fixed with @capacitor v1.0. Thank you everyone :)