Open green-mike opened 4 months ago
Hi, I use boundary in the Vue SFC Playground too, but it still shows 'SSR Error'. I also put it on StackBlitz, and it has the same problem.
Vue SFC Playground
u use ssr option
Yes, I noticed that this issue only occurs in the SSR environment. The same code does not produce errors in the browser, so I consider it a bug.
The issue can no longer be reproduced using the latest version of Vue. see https://stackblitz.com/edit/nuxt-issues-27454-6qv6vm?file=package.json
Vue version
3.4.27
Link to minimal reproduction
https://stackblitz.com/edit/nuxt-issues-27454?file=src%2FApp.vue&terminal=dev
Steps to reproduce
What is expected?
if the computed variable's value changes, trigger the watch context.
What is actually happening?
A recursion occurs and show message 'UnhandledPromiseRejection' in node.
System Info
Any additional comments?
This code causes recursive updates because the computed property routeVariables returns a new object {} each time it is accessed. When mockAsync is awaited, the watch callback is triggered, leading to an infinite loop. Reporting this bug because the documentation does not indicate that computed values cannot be used in the setup or watch immediate contexts. Moreover, no error messages appear in the client side. I suspect Vue-SSR might be causing this issue. My actual use case is more complex, requiring URL parsing, then calling an API, and setting the return value as the initial value. Therefore, it took considerable time to narrow down and reproduce the issue. During this period, I found that using the oldValue of a computed property to avoid object updates or using newValue in watch can mitigate the problem. However, since there are no errors in the client side and no hints in the documentation, this is still a valuable case to report.