fix: when built and previewed, error 500 due to undefined beforeResolve pops up

[Hibryda]

🐛 The bug

Versions:

• @nuxtjs/ionic: 0.12.1
• nuxt: 3.8.1,

Only app.vue and pages/index.vue present, containing the simplest arrangement as the following:

• app.vue

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

• index.vue

<template>
  <ion-page>
    <ion-content>
        Dummy text
    </ion-content>
  </ion-page>
</template>

Nuxt config:

export default defineNuxtConfig({
  // devtools: { enabled: true },
  modules: ["@nuxtjs/ionic"],
  ssr: false
})

When built and previewed, the following error is reported:
[nuxt] error caught during app initialization TypeError: Cannot read properties of undefined (reading 'beforeResolve')

🛠️ To reproduce

https://stackblitz.com/edit/github-kscu4y

🌈 Expected behaviour

No error

ℹ️ Additional context

Switching off router integration resolves the issue, meaning that here lies the problem.

The issue is present only when the app is built, in the development mode everything works fine.

[markglattback]

I'm also experiencing the same issue. useRouter() is returning undefined when called from inside the nuxt:payload hook.

Manually patching the @nuxtjs/ionic module and arranging the app.plugins array so that the ionic router plugin runs first solves the issue for me to enable some development, but is unworkable moving forwards.

Edit:

This bug was introduced with nuxt@3.7.4, somewhere in here.

Using 3.7.3 is a workaround for now.

Edit 2:

You can also set experimental.payloadExtraction: false to get things working again in newer versions of nuxt

[Adashi12]

I upgraded Nuxt from 3.6.5 to 3.8.1 and also had issues. After reverting back it works again.
You could try with a lower Nuxt version.

Also the preview script often does not work properly (giving me 404 and other errors).
I use npx http-server dist instead after nuxi generate.

[Hibryda]

You can also set experimental.payloadExtraction: false to get things working again in newer versions of nuxt

Thanks for the hint!

[vlacour97]

I have the same issue, can anyone suggest a fix?

[frankspee]

I also ran into this issue last week. Took me to much hours to see this breaking bug. Happy to see there is a workaround for now! That works great. Thanks @markglattback for that.

I guess this is now a problem for everyone using this module with Nuxt 3.7.4 or higher. The workaround looks experimental, so might stop working in the future.

Can this be fixed easily in this module? Or is it actually a bug in Nuxt? Do we know?

Side-note: now seeing this open for almost 2 months I guess this is not a really active developed module. Shame that on the Ionic website they fail to mention the WIP/not active maintained status of this module. Makes me thinks about not using the module. It does not seem really stable for production use. I do want to help, just never done module development before.

[frankspee]

I have the same issue, can anyone suggest a fix?

Check the posts above you for the fix/workaround for now.

[frankspee]

Just to make people not run around checking issues, this issue is related: #460

[vlacour97]

I would like to use payload extraction to have a static SPA with data pre-loaded in SSG