TypeError: Cannot read properties of undefined (reading 'appMiddleware')

[nicolaspayot]

Environment

• Operating System: Darwin
• Node Version: v18.17.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: -
• Package Manager: pnpm@8.7.5
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

https://github.com/nicolaspayot/nuxt-route-rules-undefined/

• git clone git@github.com:nicolaspayot/nuxt-route-rules-undefined.git
• pnpm i
• pnpm run dev

---

• Go to http://localhost:3000/
• Open console in browser DevTools
• Click on "Update query" button on the page
• Notice the following error 👇
  

Describe the bug

When using navigateTo with {external: true} on client side (outside of a route middleware), we can have the following error (in particular cases):

TypeError: Cannot read properties of undefined (reading 'appMiddleware')

This comes from this code:

const routeRules = await nuxtApp.runWithContext(() => getRouteRules(to.path));
if (routeRules.appMiddleware) { ... }

Somehow, routeRules is undefined.

It's happening when the navigateTo function is calling nuxtApp._scope.stop(), here.

Now, I believe that this can be avoided with a more "correct" usage on our end (we get the warning [Vue warn] cannot run an inactive effect scope. before the runtime error occurs).

However, in the reproduction example, I tried to mimic real production usage that we have:

• A user is performing an action on the page
• This actions triggers a state update in a Pinia store
• This state is watched to update the URL (router.push)
• By watching some derived data from the state, we might call navigateTo with {external: true}

I'm very willing to fix this issue. For example, we could check if routeRules is not undefined before trying to access appMiddleware.

Additional context

No response

Logs

No response

[nicolaspayot]

Actually I think that the runtime error comes from the runWithContext function. If we update its implementation this way, the warning and the error is gone:

runWithContext (fn: any) {
    if (nuxtApp._scope.active) {
        return nuxtApp._scope.run(() => callWithNuxt(nuxtApp, fn))
    }
    return callWithNuxt(nuxtApp, fn)
}