Some ionic style are not properly loaded

Ionic Framework
1

Hi. I have an issue with some ionic component styles that sometimes are not properly loaded. It happens randomly to different components.

Here is an example with a IonIcon where the :host style is not loaded

Here is what it should look like:

image
image587×629 46.8 KB

Here is what I get the the bug occurs (the :host style is not loaded):

image
image519×522 40.5 KB

I use Ionic React, and here is my ionic info:

Ionic:

Ionic CLI : 6.12.1 (/home/arthur/.nvm/versions/node/v14.15.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.4.1

Capacitor:

Capacitor CLI : 2.0.2
@capacitor/core : 2.0.2

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v14.15.0 (/home/arthur/.nvm/versions/node/v14.15.0/bin/node)
npm : 6.14.8
OS : Linux 5.4

The thing is I cannot find a way to trigger the bug, it just happens randomly. I know it is not much info, but if someone has any idea of what could trigger this i would at least know what to look for.

TY

2

What environment are you testing this in? What browser/OS version? Any sample app would help as well.

3

I use Firefox 88.0.1 (64-bit), with Ubuntu 20.04.2 LTS.
It is hard to get a sample as it happens in various component randomly in a large application. I cannot reproduce it in a blank app.

4

Disclaimer: I know absolutely nothing about React.

My initial suspicion is that you have a race condition with a side order of uncaught exception.

At least with Angular, there are many situations where my app code gets called in the middle of what is effectively a framework execution context, like:

lifecycleEventHandler() {
  doSomethingWith(this.jankilyInitializedProperty.ruhroh);
}

someOtherFunction() {
  doAsynchronousThing().then((foo) => this.jankilyInitializedProperty = foo);
}

If doAsynchronousThing completes before lifecycleEventHandler gets called, everything works great and you don’t notice a thing. If it doesn’t, an exception will be thrown when you try to access the ruhroh property of undefined. If lifecycleEventHandler was called as part of some sort of framework pseudocode like:

frameworkInternals(compo: Component) {
  compo.lifecycleEventHandler();
  attachStyles(compo);
}

…and lifecycleEventHandler throws an uncaught exception, attachStyles never gets run, and you end up with broken styling, unresponsive controls, &c.

With Angular, there are things you can set in tsconfig.json that will turn these sorts of bugs into build-time errors, allowing you to audit your code for such problems in a more deterministic fashion than simply waiting for them to bite you.

5

Hi,

It is actually possible that I have a race condition problem. I added all the tsconfig flags you suggested ( except the angular related ones ). I do not get any error/warning. I will investigate deeper into this.

I ran tests in other browsers (chrome and the previous version of firefox) , and I cannot trigger the bug.
Would it means that for some reason the Firefox lastest version triggers more often the race condition ?