I picked the Vue demo app when setting up a new AppFlow project.

Clone’d and “npm install” went fine. However ‘serve’ is broken.

I’ve not changed anything.

tchiverton@noctua:~/workspace/patient-pass-image-upload$ ionic serve

ReferenceError: primordials is not defined
   at evalmachine.<anonymous>:47:5                                                                                             
   at Object.<anonymous> (/usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/vinyl-fs/node_modules/gracef
ul-fs/fs.js:11:1)                                                                                                                 
   at Module._compile (node:internal/modules/cjs/loader:1101:14) 
   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) 
   at Module.load (node:internal/modules/cjs/loader:981:32) 
   at Function.Module._load (node:internal/modules/cjs/loader:822:12) 
   at Module.require (node:internal/modules/cjs/loader:1005:19) 
   at require (node:internal/modules/cjs/helpers:102:18) 
   at Object.<anonymous> (/usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/node_modules/vinyl-fs/node_modules/graceful-fs/graceful-fs.js:3:27)                       
   at Module._compile (node:internal/modules/cjs/loader:1101:14) 
primordials is not defined (CLI v1.7.16)

Your system information:

Cordova CLI: Not installed
Gulp version: CLI version: 2.2.0
Gulp local:  Local version: 4.0.2
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID:     Ubuntu Description:     Ubuntu 20.04.3 LTS
Node Version: v16.13.2

1 post - 1 participant

Read full topic

Description:
Using ionc3 with cordova-ios 5.1.1 and OneSignal plugin 2.11.1
with iOS version 15.3 in iPhone, when app is in background and push notification is received. handleNotificationReceived even is not being called. Have already set two flags mutable_content: true, content_available: true
(your description here)

Environment

Ionic:

Ionic CLI : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.4

Cordova:

Cordova CLI : 10.0.0 (cordova-lib@10.1.0)
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 27 other plugins)

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

ios-deploy : 1.11.4
ios-sim : 8.0.2
NodeJS : v14.17.0 (/usr/local/bin/node)
npm : 6.14.13
OS : macOS
Xcode : Xcode 13.2.1 Build version 13C100

Steps to Reproduce Issue:

1. add plugin onesignal-cordova-plugin@2.11.1 and install pods
2. Init OneSignal and handleNotificationReceived to receive notifications
3. When app is in foreground it works, when app is in background, it stops working

1 post - 1 participant

Read full topic

Description:
Facing below error while building iOS project with OneSignal plugin

PODS_XCFRAMEWORKS_BUILD_DIR: unbound variable Command PhaseScriptExecution failed with a nonzero exit code
Command PhaseScriptExecution failed with a nonzero exit code

Environment
ionic3
cordova0iOS 6.2.0
iOS Build version 15.2
Onesignal 3.0.1

Steps to Reproduce Issue:

1. Add the onesignal-cordova-plugin@3.0.1 to your project
2. Initialize the plugin with your app ID
3. Build app

1 post - 1 participant

Read full topic

Hello, a few of my nodemodules/ dependencies are using modules that need polyfills, so webpack is throwing errors and my app won’t compile. How do we specify polyfills if Ionic React app does not provide a webpack file?

ERROR in ./node_modules/jws/lib/sign-stream.js 8:13-30
Module not found: Error: Can’t resolve ‘stream’ in ‘/Users/whitneypurdum/Documents/Eliarebeam/rebeam-monorepo/packages/client/node_modules/jws/lib’
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback ‘resolve.fallback: { “stream”: require.resolve(“stream-browserify”) }’
- install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “stream”: false }

1 post - 1 participant

Read full topic

I have this strange situation where I don’t understand why the LoadingController is not injected.
this is my code:

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor( private loadingController: LoadingController) {
  }

  ngOnInit() {
    this.showLoading(true);
  }

  showLoading(show: boolean) {
      this.loadingController.create({
        message: "Login...",
        animated: true,
        spinner: "circles",
        duration: 5000
      }).then(loadEl => {
        if (show) {
          loadEl.present().then();
        } else {
          loadEl.dismiss().then()
        }
      });
    }
}

When I run my app I have this error:

ERROR TypeError: Cannot read properties of undefined (reading 'create')
    at SafeSubscriber.showLoading [as _next] (login.page.ts:61)

LoadingController is undefined, what am I doing wrong?
Thanks

1 post - 1 participant

Read full topic

Hi all,

I want to make a color picker for letting user choose color.

Can you recommend me some good color picker library for react?

Thanks very much!

1 post - 1 participant

Read full topic

I’m looking for some documentation or examples for creating dark mode splash screen assets for Android. I create my resources using the cordova-res tool, so I am not sure if there is a built-in workflow with that tool to accomplish this, or if like with Xcode, you need to make some adjustments in Android Studio in order to have the different splash screens for the app.

Any input or direction would be much appreciated.

1 post - 1 participant

Read full topic

I’m a bit confused as to how styling should be done, I’m wondering for example what is the difference between these two?

.photo-card-header__title {
    --color: var(--ion-color-danger);
}

.photo-card-header__title {
    color: var(--ion-color-danger);
}

If anyone knows of an open source ionic project that shows this well, feel free to share! I might pick it up from there

1 post - 1 participant

Read full topic

We are using cordova-music-controls2.
We are migrating the app to capacitor but there is no alternative working.
Do you know any other option?

1 post - 1 participant

Read full topic

Today I tried to push my code to ionic pro with
git push ionic quality
and then this error happens.
I tried the same yesterday without errors. Anyone knows what this is about?

Traceback (most recent call last):
File “/usr/src/app/shell.py”, line 12, in
import jwt
File “/usr/local/lib/python3.10/site-packages/jwt/init.py”, line 19, in
from .api_jwt import (
File “/usr/local/lib/python3.10/site-packages/jwt/api_jwt.py”, line 4, in
from collections import Iterable, Mapping
ImportError: cannot import name ‘Iterable’ from ‘collections’ (/usr/local/lib/python3.10/collections/init.py)
fatal: Could not read from remote repository.

1 post - 1 participant

Read full topic

I have a bluetooth-le connection to a device that occasionally drops. When this happens I try to reconnect. The user can also choose to disconnect. I need to differentiate between these events.

  return this.ble.connect(macAddress, this.onDisconnect.bind(this))
        .then(connection => this.commsData.broadcastConnection(macAddress))

communications data service

  private _connection$: Subject<IConnectionEvent> = new Subject();
  public get connection$(): Observable<IConnectionEvent> {
    return this._connection$.asObservable();
  }
  public broadcastConnection(macAddress: string) {
    this._connection$.next({event: ConnectionEvent.CONNECT, macAddress});
  }
  public broadcastDisconnection(connectionEvent: ConnectionEvent) {
    this._connection$.next({event: connectionEvent});
  }

The bluetooth-le connect method takes an onDisconnect callback that fires in both situations. I have a subject that returns observables emitting connection states as they change. A connection emits ‘connect’, a manual disconnection emits ‘disconnect’ and I need a way to signal a dropped connection.

  private isExpectedDisconnection: boolean = false;

  onDisconnect(macAddress: string) {
    // default behaviour is to retry connection
    if (!this.isExpectedDisconnection) {
      return this.commsData.broadcastDisconnection(ConnectionEvent.DROP);
    }
    this.isExpectedDisconnection = false;
  }

I’ve achieved this with a flag, ‘isExpectedDisconnection’, which is set false by default, true when a user disconnection occurs and reset to false in the onDisconnect callback function. This is a really imperative way of doing something I feel should be handled reactively. But I’m still having a hard time thinking that way.

  this.commsData.connection$
    .subscribe({
      next: (connectionEvent: IConnectionEvent) => {
        if (!connectionEvent) return;

        if (connectionEvent.event === ConnectionEvent.CONNECT) return;

        if (connectionEvent.event === ConnectionEvent.DISCONNECT) {
          this.isExpectedDisconnection = true;
          return this.ble.disconnect(this.macAddress);
        }

        if (connectionEvent.event === ConnectionEvent.DROP) {
          return this.connect(this.macAddress);
        }
      }
    })

connection event

  export enum ConnectionEvent {
    CONNECT = 'connected',
    DISCONNECT = 'disconnected',
    DROP = 'dropped'
  }

How can (or should) I have another observable merged with connection$ and only act if the disconnect was unexpected?

1 post - 1 participant

Read full topic

Hello,

I try to create a starter app with Capacitor and Svelte. Everything works fine except one thing, when I use native html anchor ( with svelte-routing) for navigate the there is a slow respond time to user interaction, maybe 400ms, before app react.

can you tell me if i did something wrong please ?

the starter repos → https://github.com/flameapp-io/svelte-capacitor-tailwind-starter

My navigation component :

<script lang="ts">
	import ThemeSwitch from '$lib/ThemeSwitch.svelte';
	import { Link } from 'svelte-routing';
	type NavLink = {
		name: string;
		url: string;
	};
	const navLinks: Array<NavLink> = [
		{
			name: 'Home',
			url: '/'
		},
		{
			name: 'Example',
			url: 'example'
		}
	];
</script>

<nav class="flex items-center">
	{#each navLinks as link}
		<Link to={link.url} class="mx-5">{link.name}</Link>
	{/each}

	<ThemeSwitch />
</nav>

1 post - 1 participant

Read full topic

I’m using the AppFlow Vue demo tabs application.

I have been able to get Android Studio to launch my AppFlow app locally on a real device (hurrah ! but boo for the emulator there being fast as cold treacle).

I can connect Chrome’s debug tools to it (woo hoo !)

But all the source code is minified, so my debugging is restricted to log statements rather than breakpoints and proper inspecting.

So I’m trying ionic capacitor run android -l --external

But this displays a screen on my device saying “web page not available” because “net::ERR_CLEARTEXT_NOT_PERMITTED” instead of the app.

The host and IP work fine if I copy them from the error screen to FireFox on the device.

3 posts - 1 participant

Read full topic

I’m using the AppFlow Vue tabs demo project.

After I run ionic capacitor run android -l --external and launch the app from Android Studio, I can connect with Chrome dev tools to inspect the HTML/CSS

But all the JavaScript is minified so I can’t use break points.

e.g. top of App.js

/*
 * ATTENTION: An "eval-source-map" devtool has been used.
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/ (function() { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

How can I stop this ?

1 post - 1 participant

Read full topic

Hi,
I am using ion-segment with Angular and Swiper.
I want to trigger the ion-segment change animation while swiping.
Tried with javascript click() method, ngModal and Viewchild.
But i can only change the detail.value of the ion-segment.
Then the correct button is highlighted/checked but there is no change animation.

1 post - 1 participant

Read full topic

Ionic iOS app works fine but if it is in background for longer duration and then if we open it then html code is getting displayed because of below error.
Failed to load resource: the server responded with a status of 403 (Forbidden)

Config.xml is as below

If we then close and open app again then all is fine now issues.

1 post - 1 participant

Read full topic

<ion-button class="next-btn" color="secondary" shape="round" expand="block" >
          NEXT
        </ion-button>



.next-btn{
    --color: var(--ion-color-light);
  }

this is my HTML and CSS. color of the button text is not changing, when I give color property to the button. but if I remove the color property the text color will change.

why is that not working when i give color property for the button?

1 post - 1 participant

Read full topic

Hey there, We decided to go with ionic react for our patient application and we are nearly done with that. While setting page boundaries. I’ve decided to redirect the user based on a context value and preventing from falling into any unmatched route.

Here is how I declared that:

return <QueryClientProvider client={queryClient}>

    <IonApp>

      <IonReactRouter>

        <IonSplitPane contentId="main">

          {isLoggedIn && <Menu />}

          <IonRouterOutlet id="main">

            <Route path="/home" render={() => isLoggedIn ? <Home /> : <Redirect to="/login" />} exact={true} />

            <Route path="/payment-history" render={() => isLoggedIn ? <PaymentHistory /> : <Redirect to="/login" />} exact={true} />

            <Route path="/renewal" render={() => isLoggedIn ? <Packages /> : <Redirect to="/login" />} exact={true} />

            <Route path="/session-result/:type" render={() => isLoggedIn ? <SessionResult /> : <Redirect to="/login" />} exact={true} />

            <Route path="/treatment-plan" render={() => isLoggedIn ? <TreatmentPlan /> : <Redirect to="/login" />} exact={true} />

            <Route path="/profile" render={() => isLoggedIn ? <Profile /> : <Redirect to="/login" />} exact={true} />

            <Route path="/cancellation-policy" render={() => isLoggedIn ? <CancellationPolicy /> : <Redirect to="/login" />} exact={true} />

            <Route path="/terms-and-conditions" render={() => isLoggedIn ? <TermsAndConditions /> : <Redirect to="/login" />} exact={true} />

            <Route path="/help" render={() => isLoggedIn ? <Help /> : <Redirect to="/login" />} exact={true} />

            <Route path="/notifications" render={() => isLoggedIn ? <Notifications /> : <Redirect to="/login" />} exact={true} />

            <Route path="/getting-started" render={() => isLoggedIn ? <GettingStarted /> : <Redirect to="/login" />} exact={true} />

            <Route path="/progress-report" render={() => isLoggedIn ? <Progress /> : <Redirect to="/login" />} exact={true} />

            <Route path="/policies" render={() => isLoggedIn ? <Policies /> : <Redirect to="/login" />} exact={true} />

            <Route path="/login" render={() => !isLoggedIn ? <Authentication /> : <Redirect to="/home" />} exact={true} />

            <Route render={() => !isLoggedIn ? <Redirect to={'/login'} /> : <Redirect to={'/home'} />} />

            {/* <Redirect to={ !isLoggedIn ? '/login' : '/home' } /> */}

            {/* { MountedRoutes } */}

          </IonRouterOutlet>

        </IonSplitPane>

      </IonReactRouter>

    </IonApp>

    { process.env.REACT_APP_ENV_STAGE === 'dev' && <ReactQueryDevtools initialIsOpen={false} />}

  </QueryClientProvider>;

Navigation is working fine but there is an issue with how it’s animating, it ended up giving strange flickering while moving from one page to other page. One thing which I observed is when I refresh the page, flickering goes away and everything works as expected.

Here is the package.json:

{

  "name": "patient-app",

  "version": "0.0.2",

  "private": true,

  "dependencies": {

    "@capacitor/android": "3.3.4",

    "@capacitor/app": "1.0.7",

    "@capacitor/clipboard": "^1.0.6",

    "@capacitor/core": "3.3.3",

    "@capacitor/haptics": "1.1.3",

    "@capacitor/keyboard": "1.2.0",

    "@capacitor/splash-screen": "^1.2.0",

    "@capacitor/status-bar": "^1.0.6",

    "@dotmind/react-use-pwa": "^1.0.4",

    "@frogress/line": "^1.1.0",

    "@ionic/react": "^6.0.0",

    "@ionic/react-router": "^6.0.0",

    "@testing-library/jest-dom": "^5.11.9",

    "@testing-library/react": "^11.2.5",

    "@testing-library/user-event": "^12.6.3",

    "@types/jest": "^26.0.20",

    "@types/node": "^12.19.15",

    "@types/react": "^16.14.3",

    "@types/react-dom": "^16.9.10",

    "@types/react-router": "^5.1.11",

    "@types/react-router-dom": "^5.1.7",

    "chart.js": "^3.7.0",

    "classnames": "^2.3.1",

    "contentful": "^9.1.6",

    "date-fns": "^2.28.0",

    "firebase": "^9.6.1",

    "framer-motion": "^4.1.17",

    "html-react-parser": "^1.4.5",

    "ionicons": "^5.4.0",

    "lodash": "^4.17.21",

    "react": "^17.0.1",

    "react-chartjs-2": "^4.0.0",

    "react-dom": "^17.0.1",

    "react-icons": "^4.3.1",

    "react-lines-ellipsis": "^0.15.0",

    "react-onesignal": "^2.0.2",

    "react-otp-input": "^2.4.0",

    "react-phone-input-2": "^2.14.0",

    "react-query": "^3.34.12",

    "react-router": "^5.2.0",

    "react-router-dom": "^5.2.0",

    "react-scripts": "4.0.2",

    "styled-components": "^5.3.3",

    "typescript": "^4.1.3",

    "web-vitals": "^0.2.4",

    "workbox-background-sync": "^5.1.4",

    "workbox-broadcast-update": "^5.1.4",

    "workbox-cacheable-response": "^5.1.4",

    "workbox-core": "^5.1.4",

    "workbox-expiration": "^5.1.4",

    "workbox-google-analytics": "^5.1.4",

    "workbox-navigation-preload": "^5.1.4",

    "workbox-precaching": "^5.1.4",

    "workbox-range-requests": "^5.1.4",

    "workbox-routing": "^5.1.4",

    "workbox-strategies": "^5.1.4",

    "workbox-streams": "^5.1.4"

  },

I’m not sure what’s going wrong here. I tried all the other solutions mentioned on other posts as well but non of them working.

Here is a video showing the issue:

https://www.youtube.com/embed/kuEK9mkZx84

2 posts - 1 participant

Read full topic

Hello. I have a completed web app that i want to turn into a native app. I wanna do it by creating a native app and implementing portals through there to load my webapp. I followed the docs and tried initializing portals in the app but nothing. So any help on how to use the implementaion in android studio would be awesome. Thanks!

1 post - 1 participant

Read full topic

Has anyone used SortableJS (or its Vue incarnation Vue.draggable) with Ionic? It’s working nicely in Chrome but on an iOS device I’m experiencing two issues:

1. If the page has been scrolled, the vertical location of dragged items is off (I believe by the amount the page has been scrolled by).
2. Dragging an item to the top of bottom of the viewport doesn’t scroll the page as it should.

1 post - 1 participant

Read full topic