Capacitor: TypeError: cameraModal.componentOnReady is not a function (on Android emulator)

[JVanloofsvelt]

Tried using the camera feature on an Android emulator:

const image = await Camera.getPhoto({ quality: 98, allowEditing: false, resultType: CameraResultType.Base64, source: CameraSource.Camera });

TypeError: cameraModal.componentOnReady is not a function at CameraPluginWeb.<anonymous> (https://localhost:6147/build/0.js:654:70) at step (https://localhost:6147/build/vendor.js:19296:23) at Object.next (https://localhost:6147/build/vendor.js:19277:53) at https://localhost:6147/build/vendor.js:19270:71 at new t (https://localhost:6147/build/polyfills.js:3:21506) at Object.__awaiter [as b] (https://localhost:6147/build/vendor.js:19266:12) at https://localhost:6147/build/0.js:646:143 at new t (https://localhost:6147/build/polyfills.js:3:21506) at CameraPluginWeb.<anonymous> (https://localhost:6147/build/0.js:646:39) at step (https://localhost:6147/build/vendor.js:19296:23)

[JVanloofsvelt]

Solved. I had to correct my imports.

From:
import { Camera, CameraResultType, CameraSource } from '@capacitor/core';

To:

import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
const { Camera } = Plugins;

[obendesmond]

Add

in your index.html file

[obendesmond]

Note: the solution above doesn't work for offline scenarios

[obendesmond]

This Doc Will Help You

[mfs409]

If you are not using Angular or React, it's easy to overlook the fact that defineCustomElements(window) returns a promise. Thus you can still get the error mentioned by @JVanloofsvelt unless you put the rest of the camera code in the then(). Here's one way to get it right, in TypeScript:

function takePicture() {
    let f = () => {
        const { Camera } = Plugins;
        Camera.getPhoto({
            quality: 90,
            allowEditing: true,
            resultType: CameraResultType.Uri
        }).then((image: CameraPhoto) => {
            console.log(image);
        }).catch((reason: any) => {
            console.log(reason);
        });
    }
    if (!init) {
        init = true;
        defineCustomElements(window).then(() => f());
    }
    else {
        f();
    }
}