Version

3.2.32

Reproduction link

sfc.vuejs.org/

Steps to reproduce

While working with promises (and async/await), I noticed that sometimes my errors in a try...catch went missing.

I eventually determined the issue to be variable shadowing (error shadowed by catch (error)) in combination with the [experimental] reactivity transform. I know this is 100% on me, both in terms of shadowing and using experimental features, but I’d still like to report the problem. Please finde a minimal reproduction in the attached SFC playground link.

To reproduce,

1. Create a reactive variable with $ref() (e.g. let error = $ref('')
2. In an inner block, shadow that variable with a non-reactive one. (e.g ... catch (error) ...)
3. Try to use the shadowed variable. (e.g. console.log(error)

What is expected?

I want to see and use the (shadowed) variable in a non-reactive way, that means without vue compiling each assignment and access to variable.value.

What is actually happening?

In the compiled code, the variable ends up being called as variable.value, ending up as undefined if variable has no field value.

While inspecting my code, and the compiled output of it, I noticed somewhere in the toolchain the shadowing was recognized correctly and dealt with by renaming the variable in question (from error to error2.) However, at the same time, each access also had .value appended to it (error2.value).

Here are two snippets:

(1) My code

let error = $ref('');

// ... 

error = ''; // reset error

try {
  await session.login(credentials);
  // Redirect to path visited before automatic redirection to login page, or home.
  router.push(route.redirectedFrom?.path ?? '/');
} catch (error) {
  console.log(error);
}

(2) Compiled result

let error = _ref("");
// ...
error.value = "";
try {
  await session.login(credentials.value);
  router.push(route.redirectedFrom?.path ?? "/");
} catch (error2) {
  console.log(error2.value); // PROBLEM HERE
}