TypeError: cameraModal.present is not a function

[dotnetdreamer]

I am using with following dependencies with ionic:

 "dependencies": {
    "@angular/common": "6.0.2",
    "@angular/core": "6.0.2",
    "@angular/forms": "6.0.2",
    "@angular/http": "6.0.2",
    "@angular/platform-browser": "6.0.2",
    "@angular/platform-browser-dynamic": "6.0.2",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "6.0.2",
    "@angular/service-worker": "6.0.2",
    "@capacitor/android": "^1.0.0-alpha.39",
    "@capacitor/cli": "^1.0.0-beta.1",
    "@capacitor/core": "^1.0.0-beta.1",
    "@ionic-native/core": "5.0.0-beta.10",
    "@ionic-native/splash-screen": "5.0.0-beta.10",
    "@ionic-native/status-bar": "5.0.0-beta.10",
    "@ionic/angular": "4.0.0-alpha.7",
    "@ionic/schematics-angular": "latest",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.3",
    "moment": "^2.22.2",
    "rxjs": "6.1.0",
    "ydn.db": "^1.3.0",
    "zone.js": "^0.8.26"
  }

When i try to use its camera plugin. i am getting error:

        const image = await Camera.getPhoto({
            quality: 90,
            allowEditing: true,
            source: CameraSource.Camera,
            resultType: CameraResultType.Base64
        });
        console.log(image.base64Data);

core.js:1598 ERROR Error: Uncaught (in promise): TypeError: cameraModal.present is not a function
TypeError: cameraModal.present is not a function
    at CameraPluginWeb.<anonymous> (camera.js:49)
    at step (tslib.es6.js:91)
    at Object.next (tslib.es6.js:72)
    at fulfilled (tslib.es6.js:62)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at CameraPluginWeb.<anonymous> (camera.js:49)
    at step (tslib.es6.js:91)
    at Object.next (tslib.es6.js:72)
    at fulfilled (tslib.es6.js:62)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at resolvePromise (zone.js:814)
    at zone.js:724
    at fulfilled (tslib.es6.js:62)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
defaultErrorLogger @ core.js:1598
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1647
next @ core.js:4727
schedulerFn @ core.js:3712
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:191
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:129
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:93
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:53
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3704
(anonymous) @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:4021
onHandleError @ core.js:4084
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

[ljieyao]

for now, I think you must include <script src='https://unpkg.com/@ionic/pwa-elements@0.0.14/dist/ionicpwaelements.js'></script> in index.html

[dotnetdreamer]

@ljieyao when i try to include that, i am getting more errors:

ionicpwaelements.2fgvex1b.js:6 Uncaught TypeError: i.$initLoad is not a function
    at l (ionicpwaelements.2fgvex1b.js:6)
    at e (ionicpwaelements.2fgvex1b.js:6)
    at HTMLElement.o.disconnectedCallback (ionicpwaelements.2fgvex1b.js:6)
    at Object.K (ionic.core.js:6)
    at Object.a [as render] (ionic.core.js:6)
    at u (ionic.core.js:6)
    at f (ionic.core.js:6)
    at u (ionic.core.js:6)
    at Array.<anonymous> (ionic.core.js:6)
    at e (ionic.core.js:6)
l @ ionicpwaelements.2fgvex1b.js:6
e @ ionicpwaelements.2fgvex1b.js:6
o.disconnectedCallback @ ionicpwaelements.2fgvex1b.js:6
K @ ionic.core.js:6
a @ ionic.core.js:6
u @ ionic.core.js:6
f @ ionic.core.js:6
u @ ionic.core.js:6
(anonymous) @ ionic.core.js:6
e @ ionic.core.js:6
(anonymous) @ ionic.core.js:6
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4062
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4053
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
resolvePromise @ zone.js:808
(anonymous) @ zone.js:724
webpackJsonpCallback @ bootstrap:23
(anonymous) @ 7.js:1
2ionicpwaelements.2fgvex1b.js:6 Uncaught TypeError: i.$initLoad is not a function
    at l (ionicpwaelements.2fgvex1b.js:6)
    at e (ionicpwaelements.2fgvex1b.js:6)
    at HTMLElement.o.disconnectedCallback (ionicpwaelements.2fgvex1b.js:6)
    at Object.K (ionic.core.js:6)
    at Object.a [as render] (ionic.core.js:6)
    at u (ionic.core.js:6)
    at f (ionic.core.js:6)
    at ionic.core.js:6
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)

[ljieyao]

you might wanna try update all the dependencies to the latest and try again.

[JuanSeBestia]

Avaces this happens:

ncaught DOMException: 'define' could not be executed in 'CustomElementRegistry': this name has already been used with this record
in Object.R [as Mn] (https://unpkg.com/@ionic/pwa-elements@0.0.14/dist/ionicpwaelements/ionicpwaelements.2fgvex1b.js:6:10617)
in map.forEach.n (https://unpkg.com/@ionic/pwa-elements@0.0.14/dist/ionicpwaelements/ionicpwaelements.2fgvex1b.js:6:14876)

So I see some services have already been injected before the event happens

EDIT: When open on PWA always happens

[JuanSeBestia]

If you include does indeed fix the problems with the camera plugin - however it, as @jsdussanc says, it then breaks alerts and other Ionic feature which seems rather ridiculous. Does anyone have a fix for this?

It defeats the point of capacitor

[JuanSeBestia]

@ollie2305 build the git ionic-pwa-elements whit stencil.config

const sass = require('@stencil/sass');

exports.config = {
  namespace: 'ionicpwaelements',
  generateDistribution: true,
  // Depend on these ionic controls
  bundles: [
    { components: ['ion-icon', 'ion-action-sheet-controller', 'ion-action-sheet'] },
    { components: ['ion-pwa-camera-modal', 'ion-pwa-camera', 'ion-pwa-action-sheet'] }
  ],
  collections: [
    { 
      name: '@ionic/core'
    }
  ],
  plugins: [
    sass()
  ]
};

exports.devServer = {
  root: 'www',
  watchGlob: '**/**',
  ssl: true
}

and add to main proyect

[JuanSeBestia]

This file can help you ionicpwaelements.js.zip

[oliverandersencox]

@jsdussanc thanks :) - what exactly am I doing with this file?

[mlynch]

Taking a look at this today

[mlynch]

Hi all, just went through and updated @ionic/pwa-elements to the latest of both stencil and ionic, and the new build is looking good. Can you try it and let me know how it works?

<script src="https://unpkg.com/@ionic/pwa-elements@1.0.0/dist/ionicpwaelements.js"></script>

Or, to bundle it:

import '@ionic/pwa-elements';

Also added some friendly docs on it: https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/

[oliverandersencox]

@mlynch - you sir, are a legend! That fixes any issues I was having. Many thanks for such speedy responses

[JuanSeBestia]

Maybe try it, later

[dalepo]

@mlynch thank you sir. One small issue, it worked just fine in my Ionic app by including it in the index.html, I wasn't able to make it work by importing in my main.ts (as you suggested import '@ionic/pwa-elements'; ). How can I make it work in the Ionic4-angular way ?

[corysmc]

I'm having the same issue as @dalepo. I'm unable to import @ionic/pwa-elements we have to include it in index.html for it to work.

[mlynch]

Unsure about that exactly, it's supposed to work, assuming you have a bundler like webpack. Will ask around

[corysmc]

For anyone else running into this issue with Stencil: If you are using: import '@ionic/pwa-elements';

You'll just need to add

@Prop({ connect: 'ion-pwa-camera-modal' })
cameraModal: HTMLIonPwaCameraModalElement;

This way the pwa-camera-modal is available for the stencil component to present. I view this as stencil's dependency injection (please correct me if I'm explaining this incorrectly).

[foli]

Hi, I'm having issues importing pwa-elements on stenciljs/ionic4 app (no angular) I've installed through npm

    "@capacitor/cli": "^1.0.0-beta.8",
    "@capacitor/core": "^1.0.0-beta.8",
    "@ionic/core": "^4.0.0-beta.13",
    "@ionic/pwa-elements": "^1.0.0",
    "@stencil/core": "^0.15.0",

and importing it in my app.tsx

import '@ionic/pwa-elements';

But it breaks the build

Does anyone have a solution for this?

[simonhaenisch]

@foli we just ran into the same issue and downgrading to @ionic/core@4.0.0-beta.12 and @stencil/core@0.13, then adding the cameraModal prop as explained above solved it for us. The issue is probably only with the ionic package though, cause the errors you get are clashing interface declarations for Ionic.

@mlynch there must be a better way to solve this than constantly updating the ionic and stencil dependencies for this package... can we make @ionic/core and @stencil/core peer dependencies maybe (so we can use our own versions to build these components)? Or does that make the "script" distribution of this package too complicated?

[corysmc]

I had the same issue @simonhaenisch , So I'm currently using
@stencil/core@0.15.1 @ionic/core@4.0.0-beta.12 I think it's an ionic problem, I planned on waiting until beta.14 came out to see if it fixes it.

[simonhaenisch]

@foli @corysmc I got this fixed and my PR just got merged: https://github.com/ionic-team/ionic-pwa-elements/pull/8. Will hopefully get released soon.

[coffeymatt]

As per @dalepo comment, I'm not clear how you get this to work in an Ionic4/Angular context (building with the latest Ionic CLI 'ionic build --prod')?

I've got 'import '@ionic/pwa-elements' in my app.module.ts but that doesn't bring it in, I still get 'cameraModal.present is not a function'.

I've tried manually referencing the ionicpwaelements.js script in the scripts section of my angular.json file, but that file references a bunch of other js files in the 'ionicpwaelements' sub directory in node modules, which it can't find (and would be too arduous to reference them all).

@mlynch Any idea's how to make this work in an angular context?

[dacrypt]

Hi,

The documentation is not clear at all. Using ionic4 + angular + capacitor is not well documented and quite confusing.

Please tell how to import it the angular/ionic way. Where and how exaclty should we import '@ionic/pwa-elements'; if using ionic4 + angular?

If you just include

in yout index.html it will work but the whole app (production build) will stop working in Firefox with the error: " This Stencil app is disabled for this browser. Developers: ES5 builds are disabled during development to take advantage of 2x faster build times. Please see the example below or our config docs if you would like to develop on a browser that does not fully support ES2017 and custom elements. Note that by default, ES5 builds and polyfills are enabled during production builds. When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds. This is only an experiement and if it slows down app development then we will revert this and enable ES5 builds during dev. Enabling ES5 builds during development: npm run dev --es5 For stencil-component-starter, use: npm start --es5 Enabling full production builds during development: npm run dev --prod For stencil-component-starter, use: npm start --prod Current Browser's Support: ES Module Imports: true ES Dynamic Imports: false Custom Elements: true Shadow DOM: true..."

[jcesarmobile]

That was fixed in pwa elements 1.0.1

[dacrypt]

Yes great!, just noticed. It would be great to clarify how can we use capacitor in the angular + ionic way!

[CFT-Chris]

@dalepo @dacrypt @coffeymatt After a non-trivial amount of time, I got Ionic 4 + Angular to work with local sources using npm i @ionic/pwa-elements rather than referencing the external script https://unpkg... in index.html.

If I'm not mistaken, @ionic/pwa-elements are simply a bunch of web components built with Stencil. To make them work the Angular way, I followed the guide for Angular integration with Stencil:

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from '@ionic/pwa-elements/dist/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

defineCustomElements(window);

The CameraModal component relies on a few svg files for icons, so you'll want Angular to copy those assets on build as well:

angular.json

/* ... */
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            /* ... */
            "assets": [
              {
                "glob": "**/*.svg",
                "input": "node_modules/@ionic/pwa-elements/dist/ionicpwaelements/icons",
                "output": "icons"
              },
/* ... */

A 404 error with ionicpwaelements.js still happens when it tries to fetch ionicpwaelements/ionicpwaelements.d8e4i292.js. If you try to resolve that error by including all the scripts in dist/ionicpwaelements via angular.json's assets, it ends up breaking Ionic modals, as was referenced much earlier in this thread. Not sure if that has ever been addressed yet.

[sneko]

On my side even by upgrading to pwa-elements 1.0.1 I'm still having the issue: cameraModal.present is not a function

[simonhaenisch]

@sneko have you added an <ion-pwa-camera-modal /> element to your DOM? (or see https://github.com/ionic-team/capacitor/issues/658#issuecomment-432769887 above)

[sneko]

@simonhaenisch I'm using Ionic+Vue+Capacitor. Capacitor is supposed to manage the camera features through its Camera plugin but when calling the Camera.getPhoto(...)it just creates a DOM element ion-pwa-camera-modal without anything in it.

That's strange.

I could try to mimic Capacitor Camera plugin by adding a ion-modal-controller, getting its reference, await for its readiness and then call its Stencil functions but the Capacitor plugin should do this for me :(

[GoturShrinivasa]

upgrade your typescript to latest version globally and inside app. npm install -g typescript@latest npm install typescript@latest

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.