Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reactivity Transform breaks variable shadowing #5709

tgrelka opened this issue Apr 13, 2022 · 0 comments · Fixed by #5711

Reactivity Transform breaks variable shadowing #5709

tgrelka opened this issue Apr 13, 2022 · 0 comments · Fixed by #5711


Copy link

tgrelka commented Apr 13, 2022



Reproduction link

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) {

(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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging a pull request may close this issue.

2 participants