hi everyone,
just checking out build new ionic-react through appflow, was so smooth, then

npm install -g @Ionic/cli @capacitor/assets
git clone https://github.com/j-oi/kids.git kids
cd kids && npm install && ionic serve

vite/4.5.0
win32-x64
node-v20.9.0
npm 10.1.0
ionic 7.1.5
ionic serve throw an error:

C:\Users\d0211\kids> ionic serve
vite.cmd --host=localhost --port=8100
[vite] failed to load config from C:\Users\d0211\kids\vite.config.ts
[vite] error when starting dev server:
[vite] Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘@vitejs/plugin-legacy’ imported from C:\Users\d0211\kids\vite.config.ts.timestamp-1700118576942-b27b152789812.mjs
[vite] at new NodeError (node:internal/errors:406:5)
[vite] at packageResolve (node:internal/modules/esm/resolve:789:9)
[vite] at moduleResolve (node:internal/modules/esm/resolve:838:20)
[vite] at defaultResolve (node:internal/modules/esm/resolve:1043:11)
[vite] at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
[vite] at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
[vite] at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
[vite] at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
[vite] at link (node:internal/modules/esm/module_job:84:36)

[ERROR] vite has unexpectedly closed (exit code 1).

    The Ionic CLI will exit. Please check any output above for error details.

tried recreate project locally
tried reinstall node, npm, ionic cli, vite
still not working. Does anyone know how to solve this?

Thank you in advance.

1 post - 1 participant

Read full topic

I was able to get cookie authentication with capacitor and capacitor/http to work on my iOS app.

My backend sends a Set-Cookie HTTP Header with a httpOnly Cookie which is used for subsequent requests, even when I close and reopen my app.

As far as I understand this cookie won’t be affected by the Apple ITP because using capacitor/http it now should be a first party cookie.

I’m wondering if that’s correct and if I can rely on capacitor/ iOS on storing the cookie for it’s lifetime (Max-Age) or if there is a mechanism in iOS which removes the cookie after a while?

1 post - 1 participant

Read full topic

vue2 + Capacitor5.5.1 + gradle 8.0+ JDK 17

vue2 code:
HomeView.vue

<template>
  <div>
    <el-button type="primary" round @click="getCurrentPosition">获取位置</el-button>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          经度：<el-input v-model="latitude" placeholder="经度"></el-input>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          纬度：<el-input v-model="longitude" placeholder="纬度"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" round @click="takePicture">拍照</el-button><br>
    <el-button type="primary" round @click="startScan">开始扫码</el-button><br>
    <el-button type="primary" round @click="stopScan">停止扫码</el-button><br>
    <el-button type="primary" round @click="scan">第三方扫码</el-button><br>
    <el-button type="primary" round @click="getMsg">获取消息</el-button><br>
    <el-button type="primary" round @click="checkForUpdate">检查版本</el-button><br>
    <div style="border: 1px red solid; width: 10rem;height: 10rem;">
      <el-image :src="photo">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>



  </div>
</template>
<script>
// 官方插件（地理定位，拍照）
import { Geolocation } from '@capacitor/geolocation';
import { Camera, CameraResultType } from '@capacitor/camera';
//官方本地通知
import { LocalNotifications } from '@capacitor/local-notifications';
//官方推送通知
import { PushNotifications, PushNotificationToken } from '@capacitor/push-notifications';
// 社区扫码插件
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
// 第三方扫码插件
import { CapacitorQRScanner } from '@johnbraum/capacitor-qrscanner';
//第三方插件 modal application auto updater （支持直接更新、强制性更新、模态更新（弹框让用户确认））
import { CapacitorUpdater } from '@capgo/capacitor-updater'
import { Dialog } from '@capacitor/dialog'
export default {
  data() {
    return {
      photo: null,
      latitude: '',
      longitude: '',
    };
  },
  methods: {
    // 获取地理位置（得到经纬度，需要墙）
    async getCurrentPosition() {
      // 在这里编写按钮点击后的处理逻辑
      console.log('Button clicked!');
      // 在需要获取地理位置的地方调用以下代码
      const coordinates = await Geolocation.getCurrentPosition();
      this.latitude = coordinates.coords.latitude
      this.longitude = coordinates.coords.longitude
      console.log('Current position:', coordinates)
    },
    // 在需要拍照的地方调用该方法
    async takePicture() {
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: false,
        resultType: CameraResultType.Uri
      });
      console.log("Current image", image.webPath)
      // 处理拍摄的照片，例如显示在页面上
      this.photo = image.webPath;
    },
    async startScan() {
      try {
        // 检查相机权限
        // 这只是一个简单的例子，可以查看更好的检查方法
        await BarcodeScanner.checkPermission({ force: true });
        // 使 WebView 的背景透明
        // 注意：如果你在使用 Ionic，可能需要进行更多的设置，可以查看下面的链接
        BarcodeScanner.hideBackground();
        const result = await BarcodeScanner.startScan(); // 开始扫描并等待结果
        // 如果扫描结果有内容
        if (result.hasContent) {
          console.log(result.content); // 输出扫描到的原始内容
        }
      } catch (error) {
        console.error('Error scanning:', error);
      }
    },
    stopScan() {
      BarcodeScanner.showBackground();
      BarcodeScanner.stopScan();
    },
    async scan() {
      try {
        let result = await CapacitorQRScanner.scan();
        console.log("第三方插件扫码结果", result);
      } catch (error) {
        console.error('Error scanning with third-party plugin:', error);
      }
    },
    getMsg() {
      LocalNotifications.schedule({
        notifications: [
          {
            title: '新消息',
            body: '你有一条新消息',
            id: 1,
            schedule: { at: new Date(Date.now() + 1000 * 5) }
          }
        ]
      });
    },
    pushMsg() {
      PushNotifications.requestPermission().then((permission) => {
        if (permission.granted) {
          // 注册推送通知
          PushNotifications.register();
        }
      });

      // // 监听推送通知
      // PushNotifications.addListener('registration',
      //   (token: PushNotificationToken) => {
      //     // 处理注册成功的逻辑
      //   }
      // );

      // PushNotifications.addListener('pushNotificationReceived',
      //   (notification: PushNotification) => {
      //     // 处理接收到推送通知的逻辑
      //   }
      // );

      // PushNotifications.addListener('pushNotificationActionPerformed',
      //   (notification: PushNotificationActionPerformed) => {
      //     // 处理用户对推送通知的操作逻辑
      //   }
      // );
    },
    //在需要检查更新的地方调用以下代码
    // async checkForUpdate() {
    //   const update = await CapacitorUpdater.notifyAppReady()
    // }
    //通过显示对话框要求用户更新来让用户决定：
    async checkForUpdate() {
      CapacitorUpdater.addListener('updateAvailable', async (res) => {
        try {
          const { value } = await Dialog.confirm({
            title: 'Update Available',
            message: `Version ${res.bundle.version} is available. Would you like to update now?`,
          })

          if (value)
            CapacitorUpdater.set(res.bundle)

        }
        catch (error) {
          console.log(error)
        }
      })

      CapacitorUpdater.notifyAppReady()

    }
  }
};
</script>

Android studio:

1 post - 1 participant

Read full topic

I’m using @capacitor/google-maps and have enabled clustering with:

await this.myMap.enableClustering();

My question is: how can I define the color and other styles of the resulting clusters?

1 post - 1 participant

Read full topic

I can create a Maps view with a number of markers. Then user specifies some filter through some dialog and I want to remove some of the markers.
I can remove the markers based on the ID they got from the addMarker function. The markers will disappear from current view.
BUT: when I zoom out all the removed markers appear again.
Problem is with both removeMarker() and removeMarkers() function.

Using capacitor 5.5.1 + angular 14.

1 post - 1 participant

Read full topic

We have built a Stencil custom element library. Then, we have built a Stencil application that uses the custom element library. Now, I want to write the spect.ts code but my application is not able to import the custom element library.

• Importing EmailModal gives the following error: “SyntaxError: Cannot use import statement outside a module”

Import {EmailModal;} from @company/custom-elements/dist/components/mail-modal

beforeEach(async () => {
page = await newSpecPage({
components: [EmailDialog, EmailModal],
html: <email-modal-app></email-modal-app>,
})
page.waitForChanges()
shadowRoot = page.doc
modal = page.doc.querySelector(‘nova-email’)
})
test(‘email modal’, ({given, when, then, and}) => {
given(‘send email’, async () => { if (modal !—null) {
Module.showModal()
}

1 post - 1 participant

Read full topic

Hello,
I need to update my Ionic 4 (cordova, angular 8.1.3) app. Target is Ionic 7 (capacitor).

From your experience, which option should be more optimal, less work and headache.

A. update to ionic 5, then to 6 and finally to Ionic 7 (also migration from cordova for capacitor)
B. start new IONIC 7 (capacitor) and migrate the code logic and page flows to the new App.

My application is intermediate level and using these plugins:
cordova-open-native-settings 1.5.2 “Native settings”
cordova-plugin-add-swift-support 2.0.2 “AddSwiftSupport”
cordova-plugin-app-version 0.1.9 “AppVersion”
cordova-plugin-camera 5.0.3 “Camera”
cordova-plugin-device 2.0.2 “Device”
cordova-plugin-file 6.0.2 “File”
cordova-plugin-fingerprint-aio 3.0.1 “FingerprintAllInOne”
cordova-plugin-geolocation 4.1.0 “Geolocation”
cordova-plugin-inappbrowser 5.0.0 “InAppBrowser”
cordova-plugin-insomnia 4.3.0 “Insomnia (prevent screen sleep)”
cordova-plugin-ionic-keyboard 2.2.0 “cordova-plugin-ionic-keyboard”
cordova-plugin-ionic-webview 4.1.2 “cordova-plugin-ionic-webview”
cordova-plugin-ionic 5.4.7 “cordova-plugin-ionic”
cordova-plugin-nativeaudio 3.0.9 “Cordova Native Audio”
cordova-plugin-screen-orientation 3.0.2 “Screen Orientation”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-statusbar 2.4.2 “StatusBar”
cordova-plugin-whitelist 1.3.3 “Whitelist”
cordova-sqlite-storage 6.0.0 “Cordova SQLite storage plugin - cordova-sqlite-storage plugin version”
es6-promise-plugin 4.2.2 “Promise”
ionic-plugin-deeplinks 1.0.22 “Ionic Deeplink Plugin”
onesignal-cordova-plugin 2.11.0 “OneSignal Push Notifications”
phonegap-plugin-barcodescanner 8.1.0 “BarcodeScanner”

2 posts - 2 participants

Read full topic

Hey Capacitor Community,

I hope you’re all doing well. I’m having a problem connecting my Capacitor app to a Socket.IO server at https://chat-dusky-rho.vercel.app/. I’ve tried for two days to fix it, but I can’t get the connection to work. I’ve checked the server, the URL, and made sure CORS is set up correctly.

If anyone knows about Socket.IO in Capacitor or has any advice, I’d really appreciate your help. Have you faced a similar issue? Your advice could really make a difference for me.

Thanks a lot!

Mohamad Salman

Here is the Code:

1 post - 1 participant

Read full topic

I have several apps deployed in S3 as static web sites that work well. I have one in particular that works well when tested locally and the deployed version in S3 shows a blank page when route is redirected to the home page. Permissions on the S3 bucket are correctly defined, static web configuration is also in the right way. Packages used:

"@angular/animations": "^16.0.0",
"@angular/common": "^16.2.8",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"@capacitor/app": "5.0.6",
"@capacitor/core": "5.5.1",
"@capacitor/haptics": "5.0.6",
"@capacitor/keyboard": "5.0.6",
"@capacitor/status-bar": "5.0.6",
"@ionic/angular": "^7.5.4",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"

Any idea?

1 post - 1 participant

Read full topic

Create and download your wireframes as an image.

This app is developed using vanilla javascript and ionic7 and its still work in progress to create wireframes. You can explore it by.

1. Download from Google Drive, SithasoIonic7WireFrames.zip - Google Drive

2. Unzip the file and then double click this file, run_server_9090.bat Ensure that port 9090 is not firewall blocked. You should see the screen above.

3. You can check these YT playlist on how you can use this app.
   https://www.youtube.com/playlist?list=PLXw1ldc5AxBN2qPYBFdXHnLOy_Z9Mtlod

Enjoy!

1 post - 1 participant

Read full topic

It would be nice to have a forum category dedicated to topics related to app publishing that aren’t specific technical issues with Ionic or Capacitor themselves.

Here are a couple topics along those lines that I’ve been looking for advice on myself:

• Subscription & in-app purchase processing tools compatible with Ionic / Capacitor apps
• Paywall design resources and publishing tools compatible with Ionic apps
• Onboarding design resources for Ionic apps

I know there are communities outside of Ionic for this but they all seem to be largely focused on native Android and iOS development, which is why it’d be nice to have a separate place for discussion about strategies that can be used with Ionic & Capacitor apps.

1 post - 1 participant

Read full topic

I’ve read lots of comments about what a chore in can be to handle subscriptions and in-app purchases so I’m looking for a subscription processing platform.

So far the platforms I’ve found that are compatible with Capacitor and Ionic are RevenueCat and Glassfy. Glassfy support tells me their paywall building tool is also compatible with Capacitor (RevenueCat’s isn’t as of now) so I’m leaning towards that.

If anyone has experience using those or other platforms with Ionic please share. (Apologies if this is technically off-topic, I can’t think of a more appropriate place to post it.)

1 post - 1 participant

Read full topic

Hello, I am a newbie and I am finishing up a course that was really designed for older versions of Ionic, however, to this point, I have not had any issues. But I have had a hard time getting the datetime logic working consistently in Ionic 7. I have seen a couple of posts where someone has had the exact same issue as I am experiencing. I have attached an image where I even simplified my approach and I still get the error

[Ionic Error]: No ion-datetime instance found for ID ‘datetime’.

I have tried to solve this ID for the past few days and I still at a dead end. I was going to roll back to an earlier version, but I am not going to throw in towel yet. I hope somebody can explain what is going on.

Thanks, Tom

These are all the pertinent dependencies for my project

“@angular/animations”: “^16.0.0”,
“@angular/cdk”: “^15.2.9”,
“@angular/common”: “^16.0.0”,
“@angular/compiler”: “^16.0.0”,
“@angular/core”: “^16.0.0”,
“@angular/forms”: “^16.0.0”,
“@angular/platform-browser”: “^16.0.0”,
“@angular/platform-browser-dynamic”: “^16.0.0”,
“@angular/router”: “^16.0.0”,
“@capacitor/android”: “^5.5.1”,
“@capacitor/app”: “5.0.6”,
“@capacitor/core”: “^5.5.1”,
“@capacitor/haptics”: “5.0.6”,
“@capacitor/keyboard”: “5.0.6”,
“@capacitor/status-bar”: “5.0.6”,
“@ionic/angular”: “^7.5.4”,
“ionicons”: “^7.2.1”,
“rxjs”: “~7.8.0”,
“tslib”: “^2.3.0”,
“zone.js”: “~0.13.0”

1 post - 1 participant

Read full topic

I’ve built an app that uses the following code to load a trained Tensorflow model (simple classifier NN built in Python).

import * as tf from '@tensorflow/tfjs';
....
const model = await tf.loadLayersModel('./assets/models/model.json');

This works on the browser but not when testing on Android. The app is written in Vanilla JS.

So far I’ve looked into using the @capacitor/filesystem package but I’m not sure how to replicate the model-loading behaviour of loadLayersModel.

How can I replicate the working behaviour of the app running on the browser, in Android?
I’d eventually tackle IOS too but one thing at a time .

Thanks!

1 post - 1 participant

Read full topic

Hello , I am using Ionic selectable tag to have a drop down to select the data I have .
I am able to use multiple selections, searching , clearing all , but I am not able to select All or deselect all at once . How can I use it. Help me add the the selectall/deselect (toggle) button in the dropdown.
This is the code:
<ionic-selectable
*ngIf=“userListLoading == false”
placeholder=“Select the user”
[(ngModel)]=“user.Id”
[items]=“UserList”
itemValueField=‘DisplayName’
itemTextField=‘DisplayName’
[isMultiple]=“true”
name=“user”
[canSearch]=“true”
[canClear]=“true”
(onChange)=“portChange($event)”
(ionCancel)=“onCancel($event)”>

1 post - 1 participant

Read full topic

Hello,
I’m having a vertical scroll problem with mouse that doesn’t work randomly on the Mac Catalyst version of the app.
Everything works perfectly on iOS with touch, and on Mac I can make the scroll work if I use the trackpad (same issue if I use iPad with a mouse).
On Mac it seems random, sometimes it works sometimes not. Sometimes quitting and relaunching the app is enough to make the scroll work again with the mouse (and without doing anything other than quitting and relaunching the app), sometimes it works again just by manipulating the app.

The scroll bar works fine, however, so I’ll just click and drag with the cursor on the scroll bar.

I have 3 scroll zones, 2 managed by ionic with ion-content and a custom HTML zone managed via CSS.

It’s really strange and I can’t find the cause of the problem. Maybe Webkit, I don’t know… It worked perfectly at the beginning and the problem has appeared since the latest macOS / Ionic updates.

Does anyone have this problem or can help me with it?

Thanks

1 post - 1 participant

Read full topic

Hi
I’ve noticed a strange behavior in my Ionic Vue3 app.

The ID and trigger for a modal, or anything else that requires this behavior (like a date and time button), only work if I reload the page.

I’m trying to understand why this is happening. Does anyone have any ideas?

Thanks

1 post - 1 participant

Read full topic

Please help me to solve this error.
I’m tried to find out solution.

ERROR Error: Uncaught (in promise): Error: Method not implemented.
Error: Method not implemented.”
we@capacitor://localhost/main.2b0388baa1bd9419.js:1:900

returnResult@user-script:2:849:49

@user-script:2:831:29

1 post - 1 participant

Read full topic

This error is shown in the chrome console when inspecting the app and the google maps is initialized. When trying to create a marker, the application crash and the following error is shown:

11-20 12:38:56.704 24584 24584 E AndroidRuntime: java.lang.NullPointerException: Attempt to invoke virtual method ‘com.google.android.gms.maps.model.Marker com.google.android.gms.maps.Google
Map.addMarker(com.google.android.gms.maps.model.MarkerOptions)’ on a null object reference
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at plugin.google.maps.PluginMarker$4.run(PluginMarker.java:299)
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at android.os.Handler.handleCallback(Handler.java:938)
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at android.os.Handler.dispatchMessage(Handler.java:99)
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at android.os.Looper.loop(Looper.java:223)
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at android.app.ActivityThread.main(ActivityThread.java:7656)
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at java.lang.reflect.Method.invoke(Native Method)
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
11-20 12:38:56.704 24584 24584 E AndroidRuntime: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)

any hints?

2 posts - 1 participant

Read full topic

Hi all,

Can someone check the following stackblitz and explain to me the difference between the two buttons and why the ion-popover behaviour is different on each of them ?

What I’m interested is why is the popover shown under the element on the “Click me” and why it’s shown as a popup ( center of screen) on the exclamation button click ?

1 post - 1 participant

Read full topic