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

Functions using reactive variables are hoisted outside of the instance #2687

Closed
EmilTholin opened this issue May 5, 2019 · 0 comments · Fixed by #2703
Closed

Functions using reactive variables are hoisted outside of the instance #2687

EmilTholin opened this issue May 5, 2019 · 0 comments · Fixed by #2703

Comments

@EmilTholin
Copy link
Member

EmilTholin commented May 5, 2019

The following piece of code throws VM47:312 Uncaught ReferenceError: square is not defined when clicking the button (REPL).

<script>
  let num = 2;
  $: square = num * num;
	
  function onClick() {
    console.log(square);
  }
</script>

<button on:click={onClick}>Click me</button>

It looks like the onClick function is being hoisted outside the instance function even though it uses square.

function onClick() {
  console.log(square);
}

function instance($$self, $$props, $$invalidate) {
  let square;

  $$self.$$.update = ($$dirty = { num: 1 }) => {
    if ($$dirty.num) {
      $$invalidate("square", (square = num * num));
    }
  };

  return {};
}

If I write let square; before the reactive statement it works as expected.

@EmilTholin EmilTholin changed the title Functions using reactive variables are hoisted outside of the instace Functions using reactive variables are hoisted outside of the instance May 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant