Capacitor and plugin in borwser developing

1

Hello
i am testing capacitor for the first time and i’ve some problems

I’ve added device plugin to project with

npm install @capacitor/device
npx cap sync

and into home.f7 i’ve added

import { Device } from '@capacitor/device';

export default (props, { $f7, $on }) => {

  const logDeviceInfo = async () => {
    const info = await Device.getInfo();
    console.log(info);
    alert(info.platform)
  };
    
  return $render;
}

this function is called on @click event, and on iOS simulator works fine

but if I try to run project into browser with npm start, app start but with white blank screen and this error in console:

[vite] connecting…
[vite] connected.
component-loader.js:49 Uncaught (in promise) Error: TypeError: Cannot read property ‘addListener’ of undefined
at component-loader.js:49

If I comment import at start of home.f7, works fine.
What i’m doing wrong?

1 Like
2

Because the web project is built/works from src folder which doesn’t know anything about capacitor. For testing purpose, you need to import Capacitor apis into web app, you can add this in the beginning of your main app.js file:

import '@capacitor/core'
import '@capacitor/app'
import "@capacitor/browser"
import "@capacitor/splash-screen"
import "@capacitor/status-bar"
3

No, actually problem is in the capacitor-app.js file which expects other plugins to present. Ok, just update f7-cli to latest, and recreate app, and all should work from your original example

1 Like
4

now works fine!
thanks!