TypeError: Cannot read properties of undefined (reading '__asyncLoader') on this.$router.push(menu.url)

[muhammad-grayphite]

Environment

This is my package.json dependencies

{ "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "engines": { "node": ">=18.0.0" }, "devDependencies": { "nuxt": "^3.4.1" }, "dependencies": { "@mdi/font": "^7.1.96", "@mdi/js": "^7.1.96", "@pinia/nuxt": "^0.4.6", "@vuepic/vue-datepicker": "^4.2.3", "axios": "^1.2.2", "pinia": "^2.0.29", "sass": "^1.58.0", "vuetify": "^3.1.14" }, "overrides": { "vue": "latest" } }

Reproduction

Ah I dont have it right now

Describe the bug

Basically we are migrating from nuxt2 to nuxt3, we have a menu bar in the left corner, by clicking on them user can go to the other pages of the site. on clicking the menu we are using nuxt this.$router.push(slug), but when for some reason it throws an error peError: Cannot read properties of undefined (reading '__asyncLoader')

This is the code that run after selecting the nav item. I have checked if I comment out this.$router.push it works fine. onNavClick(menu) { try{ this.isHidden = !this.isHidden; if (menu.url.match('http')) { window.open(menu.url, '_blank'); } else { this.$router.push(menu.url); } }catch(e){ console.error(e) }

I am clueless here, I'll appreciate if you guys can give me some hints. Also attaching screenshot and a gif to clerify

Additional context

No response

Logs

caught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')
    at isAsyncWrapper (chunk-FGDF3JHL.js:7497:1)
    at unmount (chunk-FGDF3JHL.js:5867:1)
    at unmountComponent (chunk-FGDF3JHL.js:5959:1)
    at unmount (chunk-FGDF3JHL.js:5873:1)
    at unmountChildren (chunk-FGDF3JHL.js:5979:1)
    at unmount (chunk-FGDF3JHL.js:5888:1)
    at unmountComponent (chunk-FGDF3JHL.js:5959:1)
    at unmount (chunk-FGDF3JHL.js:5873:1)
    at unmountChildren (chunk-FGDF3JHL.js:5979:1)
    at unmount (chunk-FGDF3JHL.js:5886:1)

[danielroe]

Would you provide a reproduction? 🙏

[ckouder]

I'm having the same problem. In my case, the problem is solved when I comment out the v-toolbar-title and v-app-bar-title line. It might be a bug of Vuetify I think

[pavloniym]

Same error Reproduction steps:

1. Open fresh page with NOT default layout
2. Make $router.replace({name: 'home'}) to get to home page with default layout
3. Catch an error

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <FragmentWrapper > 
  at <NuxtLayout> 
  at <VApp> 
  at <App key=3 > 
  at <NuxtRoot>

chunk-LGAZO65B.js?v=c0b43372:3361 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')

BUT

1. Load home page (with default layout)
2. Go to login screen (clean layout)
3. Make $router.replace({name: 'home'}) to return back to home page with default layout
4. No error ...

[danielroe]

@pavloniym If would be very helpful if you would create a reproduction from https://stackblitz.com/github/nuxt/starter/tree/v3.

[muhammad-grayphite]

So I fixed this issue by adding defineAsyncComponent. if you are importing components dynamically like ()=> import() you need import like this. component: defineAsyncComponent(() => import('component')) I had some dynamic imports like this comp: () => import('../../comp.vue'), I changed them like above and it is working fine now. here is from official doc https://vuejs.org/guide/components/async.html#basic-usage.

this https://github.com/nuxt/nuxt/issues/13309 thread helped me specially https://github.com/nuxt/nuxt/issues/13309#issuecomment-1398427660

[pavloniym]

@bilal-grayphite Thanks, but not working for me ...

My routing file

import {defineAsyncComponent} from 'vue'

// Routes
export const HOME_ROUTE = 'HOME_ROUTE'

export default [
    {
        path: '/',
        name: HOME_ROUTE,
        meta: { layout: 'app' },
        component: defineAsyncComponent(() => import('~/pages/home/HomePage'))
    }
]

Console warning from nuxt

vue-router.js?v=b113b80d:43 [Vue Router warn]: Component "default" in record with path "/home" is defined using "defineAsyncComponent()". Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".

And same error

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <FragmentWrapper > 
  at <NuxtLayout> 
  at <VApp> 
  at <App key=3 > 
  at <NuxtRoot>
warn2 @ chunk-LGAZO65B.js?v=76ac36e3:1381
logError @ chunk-LGAZO65B.js?v=76ac36e3:1633
handleError @ chunk-LGAZO65B.js?v=76ac36e3:1625
callWithErrorHandling @ chunk-LGAZO65B.js?v=76ac36e3:1582
flushJobs @ chunk-LGAZO65B.js?v=76ac36e3:1767
Promise.then (async)
queueFlush @ chunk-LGAZO65B.js?v=76ac36e3:1683
queueJob @ chunk-LGAZO65B.js?v=76ac36e3:1677
(anonymous) @ chunk-LGAZO65B.js?v=76ac36e3:6216
triggerEffect @ chunk-LGAZO65B.js?v=76ac36e3:589
triggerEffects @ chunk-LGAZO65B.js?v=76ac36e3:579
triggerRefValue @ chunk-LGAZO65B.js?v=76ac36e3:1174
(anonymous) @ chunk-LGAZO65B.js?v=76ac36e3:1304
triggerEffect @ chunk-LGAZO65B.js?v=76ac36e3:589
triggerEffects @ chunk-LGAZO65B.js?v=76ac36e3:574
triggerRefValue @ chunk-LGAZO65B.js?v=76ac36e3:1174
(anonymous) @ chunk-LGAZO65B.js?v=76ac36e3:1304
triggerEffect @ chunk-LGAZO65B.js?v=76ac36e3:589
triggerEffects @ chunk-LGAZO65B.js?v=76ac36e3:574
triggerRefValue @ chunk-LGAZO65B.js?v=76ac36e3:1174
set value @ chunk-LGAZO65B.js?v=76ac36e3:1218
finalizeNavigation @ vue-router.js?v=b113b80d:2399
(anonymous) @ vue-router.js?v=b113b80d:2312
Promise.then (async)
pushWithRedirect @ vue-router.js?v=b113b80d:2281
push @ vue-router.js?v=b113b80d:2207
navigate @ vue-router.js?v=b113b80d:1463
callWithErrorHandling @ chunk-LGAZO65B.js?v=76ac36e3:1580
callWithAsyncErrorHandling @ chunk-LGAZO65B.js?v=76ac36e3:1588
invoker @ chunk-LGAZO65B.js?v=76ac36e3:8198
chunk-LGAZO65B.js?v=76ac36e3:3361 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '__asyncLoader')
    at isAsyncWrapper (chunk-LGAZO65B.js?v=76ac36e3:3361:38)
    at unmount (chunk-LGAZO65B.js?v=76ac36e3:6472:36)
    at unmountChildren (chunk-LGAZO65B.js?v=76ac36e3:6584:7)
    at unmount (chunk-LGAZO65B.js?v=76ac36e3:6493:9)
    at unmountComponent (chunk-LGAZO65B.js?v=76ac36e3:6564:7)
    at unmount (chunk-LGAZO65B.js?v=76ac36e3:6478:7)
    at unmountChildren (chunk-LGAZO65B.js?v=76ac36e3:6584:7)
    at unmount (chunk-LGAZO65B.js?v=76ac36e3:6493:9)
    at unmountChildren (chunk-LGAZO65B.js?v=76ac36e3:6584:7)
    at unmount (chunk-LGAZO65B.js?v=76ac36e3:6493:9)

[pavloniym]

@danielroe Will create as soon as possible, thanks

[muhammad-grayphite]

@pavloniym sorry for late reply. are you still getting this error? basically we were using some dyanamic imports without defineAsyncComponent and some with it. I simply changed them using defineAsyncComponent in the whole project and its working fine. try using defineComponent if that works. maybe there is am issue with using different layouts.

[pavloniym]

After my recovery and some code research i have found an issue:

This variant produces an error:

<v-list-subheader v-text='"OR"' />

This variant works correct, without error:

<v-list-subheader>OR</v-list-subheader>

v-list-subheader - vuetify component (test on vuetify v3+). Do not know why this syntax '"OR"' crashes vue/nuxt ...

[danielroe]

@pavloniym Based on your description, this is an upstream issue: https://github.com/vuejs/core/issues/6435 (and others)

[5e]

I have updated to:

"vue-router": "^4.2.4", "vuetify": "^3.3.10",

and I no longer get this problem

[danielroe]

Closing as this is not a Nuxt issue.