[BUG] useRouter().push will return TypeError: Cannot read properties of null (reading 'parentNode')

[zyxkad]

Reproduction

https://github.com/zyxkad/vue-router-issue

Steps to reproduce the bug

1. git clone https://github.com/zyxkad/vue-router-issue && cd vue-router-issue
2. npm ci && npm run dev
3. access the server
4. Click the About tag to switch to another page
5. You will see the error in the console
6. Awitch back by click Home
7. You will see the same error in the console again, and the URL will change but the page won't be rendered back

Expected behavior

The app should work without any errors

Actual behavior

runtime-dom.esm-bundler.js:33 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (runtime-dom.esm-bundler.js:33:30)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5777:11)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at instance.update (runtime-core.esm-bundler.js:5814:51)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:32)
    at flushJobs (runtime-core.esm-bundler.js:357:9)
parentNode @ runtime-dom.esm-bundler.js:33
componentUpdateFn @ runtime-core.esm-bundler.js:5777
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
callWithErrorHandling @ runtime-core.esm-bundler.js:158
flushJobs @ runtime-core.esm-bundler.js:357
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
(anonymous) @ runtime-core.esm-bundler.js:5810
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
set value @ reactivity.esm-bundler.js:1018
finalizeNavigation @ vue-router.mjs:3355
(anonymous) @ vue-router.mjs:3220
Promise.then (async)
pushWithRedirect @ vue-router.mjs:3187
push @ vue-router.mjs:3112
(anonymous) @ AboutView.vue:6
withAsyncContext @ runtime-core.esm-bundler.js:3257
setup @ AboutView.vue:6
callWithErrorHandling @ runtime-core.esm-bundler.js:158
setupStatefulComponent @ runtime-core.esm-bundler.js:7236
setupComponent @ runtime-core.esm-bundler.js:7197
mountComponent @ runtime-core.esm-bundler.js:5599
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
componentUpdateFn @ runtime-core.esm-bundler.js:5773
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
callWithErrorHandling @ runtime-core.esm-bundler.js:158
flushJobs @ runtime-core.esm-bundler.js:357
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
(anonymous) @ runtime-core.esm-bundler.js:5810
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:363
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
(anonymous) @ reactivity.esm-bundler.js:1135
triggerEffect @ reactivity.esm-bundler.js:373
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:974
set value @ reactivity.esm-bundler.js:1018
finalizeNavigation @ vue-router.mjs:3355
(anonymous) @ vue-router.mjs:3220
Promise.then (async)
pushWithRedirect @ vue-router.mjs:3187
push @ vue-router.mjs:3112
navigate @ vue-router.mjs:2201
callWithErrorHandling @ runtime-core.esm-bundler.js:158
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:166
invoker @ runtime-dom.esm-bundler.js:278
Show 76 more frames

Additional information

No response

[zyxkad]

Ah, sorry, dup with #1319

[zyxkad]

No, I looked again, #1319 is caused by double Suspenses, but mine probably didn't

[posva]

This is because you are pushing while the view is being created which is not supported because it doesn’t make sense to push right at the same time the component mounts as it leads to just leave the page right away. If you have some logic around it, use a navigation guard instead

[posva]

Oh also, you need to change the syntax you are using

• Suspense doesn't work with keepAlive core#3652 (comment)
• https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components

[zyxkad]

Makes sense. Thanks :)