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