unable to load pwa element 'pwa-camera-modal'

Issue

Using the capacitor camera plugin, I'm trying to take photos with the camera on ionic. Unfortunately, whenever I call the function to launch the camera on a browser platform, I get this error:

unable to load pwa element 'pwa-camera-modal'

Once this happens, a dialogue is opened prompting me to upload an image, rather than the computer's webcam. How do I circumvent this issue?

Solution

From capacitor:

Some Capacitor plugins, such as Camera or Toast, have web-based UI available when not running natively.This UI is implemented using web components. Due to the magic of Shadow DOM, these components should not conflict with your own UI. To enable these controls, you must add @ionic/pwa-elements to your app.

And here's how to go about enabling it:

1. npm install @ionic/pwa-elements
2. In your app.component.ts file, import defineCustomElements from the pwa-elements you just installed, and then call it in the class controller:

Code:

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

...

export class AppComponent {
  constructor() {
    defineCustomElements(window);
  }
}

Answered By - Cedric Ipkiss