Bug: Svelte template reactivity issue

[CTNicholas]

Bug report

Packages affected

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

I'm using sandpack-react. Using the svelte template with default settings, reactive variables update correctly, but they render to the DOM as undefined.

What were you doing when the problem occurred?

Using this basic component:

<script>
  let count = 0;
  const add = () => {
    count += 1
    console.log('Added:', count)
  }
</script>

<button on:click={add}>
  Count: {count}
</button>

What steps can we take to reproduce the problem?

Paste the code into /App.svelte into Sandpack in my sandbox. The button reads undefined after clicking, but count displays correctly in the console.

Link to sandbox: link

Your Environment

Software	Name/Version
Sandpack-react version	^0.9.13
Browser	Chrome, Firefox
Operating System	Windows

[CTNicholas]

The same happens with a customSetup passed to SandpackProvider. Switching the dependency from svelte: '^3.0.0' to svelte: '^3.44.2' fixes the issue, even though Svelte v3.44.2 is loaded by the bundler in both instances. A bundler issue?

Sandbox demo

[danilowoz]

Hey @CTNicholas, thanks for raising this issue! We've been working on a fix to address this issue in the main bundle repository. Meanwhile, I hope this is not blocking you.

[CTNicholas]

Hey @CTNicholas, thanks for raising this issue! We've been working on a fix to address this issue in the main bundle repository. Meanwhile, I hope this is not blocking you.

Awesome! All good, I love the package, keep it up guys!