\r\n\u003C/template>\r\n```\r\n\r\nThis components prints undefined in the console if its clientonly (it works if wrapped in ClientOnly but not if the file is .client.vue)\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2953,2954],{"name":2894,"color":2895},{"name":2955,"color":2956},"pending triage","E99695",24398,"Template Refs are undefined in onMounted hook in *.client.vue components","2023-11-22T00:04:50Z","https://github.com/nuxt/nuxt/issues/24398",0.7071433,{"labels":2963,"number":2966,"owner":2875,"repository":2875,"state":2900,"title":2967,"updated_at":2968,"url":2969,"score":2970},[2964,2965],{"name":2894,"color":2895},{"name":2955,"color":2956},14465,"Template refs can only be addressed correctly during initial loading","2023-01-19T17:35:46Z","https://github.com/nuxt/nuxt/issues/14465",0.7106881,{"description":2972,"labels":2973,"number":2985,"owner":2875,"repository":2875,"state":2900,"title":2986,"updated_at":2987,"url":2988,"score":2989},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.12.1\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nReproduction : https://stackblitz.com/edit/github-88hbfa?file=pages%2Findex.vue\r\n\r\nSteps to reproduce:\r\n1. In a page file, retrieve data using `useAsyncData` and display an array of elements in the template using this data.\r\n2. Assign the array of elements to a ref variable as described in the Vue.js documentation: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs.\r\n3. Display this page in a browser.\r\n4. Edit the JS code of this page (e.g., modify console.log).\r\n5. Errors will appear.\r\n\r\nThis error does not occur if:\r\n- The page is being shown for the first time (no reloading through JS edits).\r\n- The code specified above is inside app.vue and not inside a page that is loaded with NuxtPage (if you copy/paste index.vue inside app.vue, errors do not occur).\r\n- No ref is used\r\n- `useAsyncData` is not used\r\n\r\n### Describe the bug\r\n\r\nConsole error is shown related to scheduler flush.\r\nAlso, `TypeError: Cannot read properties of null (reading 'parentNode')` error is thrown.\r\nSee Logs field for more detials about these errors\r\n\r\n### Workarounds\r\n\r\n- Reload page (meh)\r\n- Use `reactive` instead of `ref`\r\n```html\r\n\u003Ctemplate>\r\n\u003Cdiv>\r\n \u003Cli v-for=\"menuItem in menuItems\" ref=\"(el) => updateMenuItemRefs(el)\">\u003C/li>\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n[...]\r\nconst menuItemRefs = reactive([])\r\nfunction updateMenuItemRefs (el) {\r\n menuItemRefs.push(el)\r\n}\r\n\u003C/script>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n(initially made with `test.vue` page, but error is the same)\r\n\r\n```shell-script\r\ntest.vue:14 edit this message 2\r\n\r\nchunk-3Q27KRJ5.js:97 [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 \r\n at \u003CRouteProvider key=\"/test\" routeProps= {Component: {…}, route: {…}} pageKey=\"/test\" ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\nwarn @ chunk-3Q27KRJ5.js:97\r\nlogError @ chunk-3Q27KRJ5.js:271\r\nhandleError @ chunk-3Q27KRJ5.js:263\r\ncallWithErrorHandling @ chunk-3Q27KRJ5.js:215\r\nflushJobs @ chunk-3Q27KRJ5.js:411\r\nPromise.then (async)\r\nqueueFlush @ chunk-3Q27KRJ5.js:324\r\nqueueJob @ chunk-3Q27KRJ5.js:318\r\nreload @ chunk-3Q27KRJ5.js:517\r\n(anonymous) @ chunk-3Q27KRJ5.js:547\r\n(anonymous) @ test.vue?t=1688346524889:81\r\n(anonymous) @ client.ts:542\r\n(anonymous) @ client.ts:459\r\n(anonymous) @ client.ts:306\r\nqueueUpdate @ client.ts:306\r\nawait in queueUpdate (async)\r\n(anonymous) @ client.ts:159\r\nhandleMessage @ client.ts:157\r\n(anonymous) @ client.ts:90\r\nShow 7 more frames\r\n\r\nchunk-MNWBZQKJ.js:82 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')\r\n at parentNode (chunk-MNWBZQKJ.js:82:30)\r\n at ReactiveEffect.componentUpdateFn [as fn] (chunk-3Q27KRJ5.js:5823:11)\r\n at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)\r\n at instance.update (chunk-3Q27KRJ5.js:5860:52)\r\n at callWithErrorHandling (chunk-3Q27KRJ5.js:213:32)\r\n at flushJobs (chunk-3Q27KRJ5.js:411:9)\r\nparentNode @ chunk-MNWBZQKJ.js:82\r\ncomponentUpdateFn @ chunk-3Q27KRJ5.js:5823\r\nrun @ reactivity.esm-bundler.js:178\r\ninstance.update @ chunk-3Q27KRJ5.js:5860\r\ncallWithErrorHandling @ chunk-3Q27KRJ5.js:213\r\nflushJobs @ chunk-3Q27KRJ5.js:411\r\nPromise.then (async)\r\nqueueFlush @ chunk-3Q27KRJ5.js:324\r\nqueueJob @ chunk-3Q27KRJ5.js:318\r\nreload @ chunk-3Q27KRJ5.js:517\r\n(anonymous) @ chunk-3Q27KRJ5.js:547\r\n(anonymous) @ test.vue?t=1688346524889:81\r\n(anonymous) @ client.ts:542\r\n(anonymous) @ client.ts:459\r\n(anonymous) @ client.ts:306\r\nqueueUpdate @ client.ts:306\r\nawait in queueUpdate (async)\r\n(anonymous) @ client.ts:159\r\nhandleMessage @ client.ts:157\r\n(anonymous) @ client.ts:90\r\nShow 8 more frames\r\n```\r\n",[2974,2975,2976,2979,2982],{"name":2894,"color":2895},{"name":2942,"color":2943},{"name":2977,"color":2978},"upstream","E8A36D",{"name":2980,"color":2981},"🔨 p3-minor","FBCA04",{"name":2983,"color":2984},"suspense","C70109",21901,"Unhandled error during execution of scheduler flush related to NuxtPage, useAsyncData & refs ","2024-07-22T19:43:53Z","https://github.com/nuxt/nuxt/issues/21901",0.71134603,["Reactive",2991],{},["Set"],["ShallowReactive",2994],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fePsKnvjJg0YwN2aJ6_y4iGlwJyp4pg00VBHU7I4awSc":-1},"/nuxt/test-utils/527"]