Subscribe on changes!

TransitionGroup Breaking Hot Reload

need more info
avatar
Kuuzoo
Aug 16th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9U9tu2zAM/RVOwNANSOIOfWu9Yl1mrAkQJ8gFfdGL4zCxWlkyJDkXBPn3UTLsbsXaF0PiOSSPDukze6iqwb5GdstimxtRObDo6gpkpnbfOXOWs3uuRFlp42CRSXdKVyPYGl3C1Y8o1wQoVM5GJlMbXUYtxRe9uoMognFtHbiDhnlgwLDLgYNwBbgChaGochSDkbJig13HCTFPT5ktmpac/dMzoAdCm5Pn+b6c3XUFzrXFZE/sR+ou0VzaQoOodkLa5ksZndTyBCsfg6HMrO3BoRB5AcLCt+vrz6A0PaZAmBm9llj2YAQbsYG8wPyFAKKtcasNgq3XpXBOqN2AK67eyPjylSTGUWM5GUwXh2UlM4d0A4iX5KcVTmj122iah8pKpHlsMzKH3UP8qd+HpwKpkVdTNWq8yiKrKlTUFvr9UIqKdXN7wRMVaa+cRS3j1eeG0t1bThy9UUTROOo0sx6tSq7VVuwGz1Yr2qezT+PMj0vQi6eVTyWnbyEgHsuk1IdxiDlTY6+NBzf/E3+2Rx/jbGbQotmTFR3mMrND18DJIsUjnTuw1JtaEvsDcI5WS1oGrRrazzoM6i9eUDsKa0X2Lm1ypI217aO8UM+8BD5ntId+0997+qvcm8FNyOPqQi76nPaH9DMepfCYzBNas/FqsYTVIoH5Q/prOoHhdDKbpkm6XPhJs8sf2Q9GSw==

Steps to reproduce

Normal Vue + Vite Installer. Adding Multiple Components with a TransitionGroup ontop. Now when I try to live reload I get a big error:

MoneyWash.vue?t=1692153450913:95 [Vue warn]: Unhandled error during execution of render function 
  at <TransitionGroup name="fade" > 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
renderComponentRoot @ runtime-core.esm-bundler.js:853
componentUpdateFn @ runtime-core.esm-bundler.js:5764
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
reload @ runtime-core.esm-bundler.js:464
(anonym) @ runtime-core.esm-bundler.js:494
(anonym) @ MoneyWash.vue?t=1692153450913:95
(anonym) @ client.ts:559
(anonym) @ client.ts:476
(anonym) @ client.ts:323
queueUpdate @ client.ts:323
await in queueUpdate (async)
(anonym) @ client.ts:176
handleMessage @ client.ts:174
(anonym) @ client.ts:91
20 weitere Frames anzeigen
MoneyWash.vue?t=1692153450913:95 [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 <TransitionGroup name="fade" > 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
callWithErrorHandling @ runtime-core.esm-bundler.js:160
flushJobs @ runtime-core.esm-bundler.js:357
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
reload @ runtime-core.esm-bundler.js:464
(anonym) @ runtime-core.esm-bundler.js:494
(anonym) @ MoneyWash.vue?t=1692153450913:95
(anonym) @ client.ts:559
(anonym) @ client.ts:476
(anonym) @ client.ts:323
queueUpdate @ client.ts:323
await in queueUpdate (async)
(anonym) @ client.ts:176
handleMessage @ client.ts:174
(anonym) @ client.ts:91
16 weitere Frames anzeigen
runtime-dom.esm-bundler.js:989 Uncaught (in promise) TypeError: child.el.getBoundingClientRect is not a function
    at Proxy.<anonymous> (runtime-dom.esm-bundler.js:989:43)
    at renderComponentRoot (runtime-core.esm-bundler.js:816:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5764:26)
    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)
(anonym) @ runtime-dom.esm-bundler.js:989
renderComponentRoot @ runtime-core.esm-bundler.js:816
componentUpdateFn @ runtime-core.esm-bundler.js:5764
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
reload @ runtime-core.esm-bundler.js:464
(anonym) @ runtime-core.esm-bundler.js:494
(anonym) @ MoneyWash.vue?t=1692153450913:95
(anonym) @ client.ts:559
(anonym) @ client.ts:476
(anonym) @ client.ts:323
queueUpdate @ client.ts:323
await in queueUpdate (async)
(anonym) @ client.ts:176
handleMessage @ client.ts:174
(anonym) @ client.ts:91
18 weitere Frames anzeigen
MoneyWash.vue?t=1692153450913:95 [Vue warn]: Unhandled error during execution of render function 
  at <TransitionGroup name="fade" > 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
renderComponentRoot @ runtime-core.esm-bundler.js:853
componentUpdateFn @ runtime-core.esm-bundler.js:5764
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
reload @ runtime-core.esm-bundler.js:464
(anonym) @ runtime-core.esm-bundler.js:494
(anonym) @ MoneyWash.vue?t=1692153450913:95
(anonym) @ client.ts:559
(anonym) @ client.ts:476
(anonym) @ client.ts:323
queueUpdate @ client.ts:323
await in queueUpdate (async)
(anonym) @ client.ts:176
handleMessage @ client.ts:174
(anonym) @ client.ts:91
20 weitere Frames anzeigen
MoneyWash.vue?t=1692153450913:95 [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 <TransitionGroup name="fade" > 
  at <App>
warn2 @ runtime-core.esm-bundler.js:41
logError @ runtime-core.esm-bundler.js:216
handleError @ runtime-core.esm-bundler.js:208
callWithErrorHandling @ runtime-core.esm-bundler.js:160
flushJobs @ runtime-core.esm-bundler.js:357
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js:270
queueJob @ runtime-core.esm-bundler.js:264
reload @ runtime-core.esm-bundler.js:464
(anonym) @ runtime-core.esm-bundler.js:494
(anonym) @ MoneyWash.vue?t=1692153450913:95
(anonym) @ client.ts:559
(anonym) @ client.ts:476
(anonym) @ client.ts:323
queueUpdate @ client.ts:323
await in queueUpdate (async)
(anonym) @ client.ts:176
handleMessage @ client.ts:174
(anonym) @ client.ts:91
16 weitere Frames anzeigen
runtime-dom.esm-bundler.js:989 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at Proxy.<anonymous> (runtime-dom.esm-bundler.js:989:43)
    at renderComponentRoot (runtime-core.esm-bundler.js:816:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5764:26)
    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)
(anonym) @ runtime-dom.esm-bundler.js:989
renderComponentRoot @ runtime-core.esm-bundler.js:816
componentUpdateFn @ runtime-core.esm-bundler.js:5764
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
reload @ runtime-core.esm-bundler.js:464
(anonym) @ runtime-core.esm-bundler.js:494
(anonym) @ MoneyWash.vue?t=1692153450913:95
(anonym) @ client.ts:559
(anonym) @ client.ts:476
(anonym) @ client.ts:323
queueUpdate @ client.ts:323
await in queueUpdate (async)
(anonym) @ client.ts:176
handleMessage @ client.ts:174
(anonym) @ client.ts:91
18 weitere Frames anzeigen

What is expected?

A normal Transition on all Elements Inside the Group

What is actually happening?

It breaks live reloading, but Transition works, when I change the State from Methods inside the Component.

System Info

System:
    OS: Windows 10 10.0.20348
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-2630 v2 @ 2.60GHz
    Memory: 4.85 GB / 8.03 GB
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Internet Explorer: 11.0.20348.380
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

avatar
LinusBorg
Aug 18th 2023

Please provide a fully runnable production. We can't investigate this without one.

avatar
Kuuzoo
Aug 19th 2023

Please provide a fully runnable production. We can't investigate this without one. You'll find a attached working Component, like I'm using it. No changes, just some other Elements inside of my component, I just hope that doesnt matter!

https://play.vuejs.org/#eNp9U8Fu2zAM/RVOl7ZAbRcodkm9Al1nrCnQpEhS7OKLZjOJW1kSJDlNEPjfR8lJnKbbTjYfyacn8mnL7rSOVw2yAUttYSrtwKJrNAguF99y5mzObnNZ1VoZBxMuS1XfK4okSgdzo2o4ixOPeJazm1ymScdDXRQ4rLXgDikCSGeGS1u5SsmfRtEhktdIh8x5iXQMpF+iCH4t0SC4JYI26rfAGioLS641ykouIIoCFZGdinnDDXGdoDlLuqOTk7MJTZODOnZJNy2UnFeL+NUqSePY+racFcRUCTRj7VtpGgMIGZ/jQqj3x4A50+DlHi+WWLz9BX+1a4/l7NmgRbOiSx9yjpsFklyfzqYjXNP/IVmrshFU/Z/kBK0SjdfYlX1vZEmyj+qC2mFYJA1yZrO1Q5rI7lJeqK9sQ33OaJt+iP+6ei/3Or4OfblsaYp7J3g/+W0OR/CQTTIYwuPLdAYv0wwmd6Mf4ye4Hz89j0fZaDYNOzW0j50BP1iP8J35tiXOKxlUhdW2nf2C1Jzd+Epch0oq5I0I3+OG862vgeA6P6JPVrns8iV3/PyC7hoiAEMPwsg+BrBL9T6AORcW92AbBPg50Ke9CFH/FCgIQP8cfMRvOwnQm/iBzJ8mvMt/8Kd1G4FxYS2NNvYvJqJ6NBEvXLUij1FDBwvkK9zBvWh3sP8AlOZF5TZwFX+1gNxiUBuUHzP78X7idarn3PEM4KojYO0ftTd1zw==

avatar
sodatea
Aug 31st 2023

I don't understand. What should I do on the linked playground page to see the error?

avatar
Kuuzoo
Sep 6th 2023

It was an issue with my Installed Packages somehow. I managed to fix it be fully setting it up in a new project! My Bad guys!!

GitHub Track