fix: ionic 7 tabs don't have any style even on playground

[Tragio]

🐛 The bug

Hi 👋

I was trying out the last version of Ionic, and I noticed that the tabs don't have any style. On my personal app, I also noticed some other quirks. I searched upstream, on the ionic framework git and couldn't find anyone talking about this, so I'm not sure where it's coming from.

There's a bunch of class="undefined".

Playground picture:

🛠️ To reproduce

https://stackblitz.com/github/nuxt-modules/ionic/tree/main/playground

🌈 Expected behaviour

Tabs have style.

ℹ️ Additional context

No response

[therhenals]

Hi, the same behavior happens with ion-back-button, I noticed that it only happens the first time when running "npm run dev". If we run it again, everything looks correct and without class="undefined

[rvmourik]

I can confirm this issue still exists, what @therhenals says is also correct. The second time you run the command they do get loaded. However when using nuxt generate the styles for tabs are not included in the entry.css file. Which results in styles missing in the end build and when you open this in the IOS simulator you also missing the specific styling. For instance the .button-inner specific styles are not included.

[rvmourik]

I can confirm this issue still exists, what @therhenals says is also correct. The second time you run the command they do get loaded. However when using nuxt generate the styles for tabs are not included in the entry.css file. Which results in styles missing in the end build and when you open this in the IOS simulator you also missing the specific styling. For instance the .button-inner specific styles are not included.

In addition to this, it looks like it is happening with more components. For debugging purposes I added a simple list component.

This is in the browser

This is the IOS simulator

You see the missing styling, the issue that it runs through the header is because of the missing safe view settings. But I don't think that is related to this problem.

A difference I could find when debugging is that in the source of the browser the "ios" class is present in all components when using the iPhone simulations. However in the IOS simulator when debugging with safari, the "ios" class is only present on the html-tag and the <ion-app>-component. But on all components that are in the router-outlet it start with undefined.

Maybe this has something to do with it, because if we take my example of the button-inner-class missing.

As you can see the CSS string is bound to the ios platform, so if it can't decide which one it is the css is missing.,

edit Installed the Android simulator, same problem.

[tlebeitsuk]

I'm having the same issue. I need to run "pnpm dev" a second time to get the tab bar to show.

[MarcusAngel]

Following up on this, not a blocker but having to run dev twice is silly

[then3rdman]

So for more context it seems that ALL css is missing when this occurs. Its also not consistent

[then3rdman]

Some further investigation.

We have in development where the error comes up that the page is missing the ion-page tag and we are missing the css.

We have noticed that it happens for me when the Vite client warmed up message appears after the Nitro built in ## message.

Works

✔ Nuxt DevTools is enabled v0.8.2 (experimental)                                                                                                  
ℹ Vite client warmed up in 2487ms                                                                                                                 
✔ Nitro built in 1270 ms   

Doesn't work

✔ Nuxt DevTools is enabled v0.8.2 (experimental)                                                                                                  
✔ Nitro built in 1237 ms                                                                                                                    
ℹ Vite client warmed up in 3189ms

[cernymatej]

Hi, are there any updates on this issue? Were you able to find a reasonable workaround?