Nuxt 3.13.1+ breaks Ionic styles

[jakubkoje]

🐛 The bug

After upgrading Nuxt to 3.13.1+, I noticed that Ionic components have a class of "undefined" instead of the correct Ionic classes. This causes the entire app to break due to incorrect CSS styles. (This can be observed for example on <ion-app> and <ion-tab-bar>).

🛠️ To reproduce

https://stackblitz.com/edit/github-qjn2d7?file=package.json

🌈 Expected behaviour

Classes should not be undefined.

ℹ️ Additional context

[jakubkoje]

I was able to dirty fix this issue by editing @ionic/vue/dist/index.js.

The fix is to move every defineCustomElement(); outside the defineComponent(). Not sure what could be causing this.

[Rizzato95]

I've the same issue, I tried @jakubkoje fix but it doesn't work.

[jakubkoje]

I've the same issue, I tried @jakubkoje fix but it doesn't work.

Weird, this is example of my edited IonBackButton. Do not forget to remove node_modules/.cache after editing the module and restart server afterward.

Also, do not forget that the node modules are refreshed every install. I am currently handling this using patch-package library, even though forking ionic package might be the better way.

defineCustomElement$19(); // PUT THE LINE HERE
const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
    defineCustomElement$19(); // MOVE THIS LINE ABOVE THIS FUNCTION
    // TODO(FW-2969): type
    const ionRouter = inject("navManager");
    const onClick = () => {

[Rizzato95]

I did it for every component but it doesn't work.
However I found a valid workaround for me:

1. Force the Nuxt version to 3.12.4 in the package.json

- "nuxt": "^3.13.1",
+ "nuxt": "3.12.4",

2. Delete node_modules folder
3. Delete package-lock.json (or pnpm-lock.yaml)
4. Reinstall packages

[danielroe]

This is likely to be linked to Vue 3.5+. Can you reproduce on an earlier Nuxt with the latest Vue version?

[fanckush]

@danielroe here's a repro

• latest version of vue 3.5.10
• nuxt 3.10.0

as you can see, things work just fine, it's unlikely to be vue imo

[Ismaele-silla]

I'm having the same issue as well. It's happening in the browser while on dev mode, but not after converting my app for Android. Setting Nuxt's version to 3.12.4 as suggested fixed it

[hahagu]

Adding the following to nuxt.config.ts worked for me.

vite: {
  optimizeDeps: {
    exclude: [
      '@nuxtjs/ionic',
      '@ionic/vue'
    ]
  }
}

[colearendt]

Running into this and have not been able to find a workaround that makes my environment happy 😢

I created a reprex to show the issue. npm run dev works great - looks great. npm run generate & npx serve dist shows style-less.

https://stackblitz.com/edit/nuxt-starter-metio6vb?file=pages%2Ftabs%2Ftab1.vue

[colearendt]

Unfortunately those are many hours I will never get back. But there is in fact a solution 😅

npm install @ionic/vue@8.4.1

Thanks to this stackblitz that showed me the light! 🎉 😄

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