Errors are reported when using vue3 template setup

[jerrywu001]

Bug report

Packages affected

• [👉🏽 ] sandpack-react

Description of the problem

Errors are reported when using vue3 template setup

<Sandpack template="vue3"  />

<template>
  <main id="app">
    <h1>{{ helloWorld }}</h1>
  </main>
</template>
                             
<script setup>
const helloWorld = ref("Hello World");
</script>

[danilowoz]

@DeMoorJasper, it seems that given the following template, which includes the tags template, script, and style. But if you try to remove the style tag, it breaks something.

Sandbox: https://codesandbox.io/s/sandpack-project-forked-x9zfmb?file=/src/App.vue

[jerrywu001]

There is another problem: using setup on the script tag, the console reports an error. And no results are displayed in the preview area.

<template>
  <main id="app">
    <h1>{{ helloWorld }}</h1>
  </main>
</template>
                             
<script setup>
const helloWorld = ref("Hello World");
</script>

[uyarn]

@danilowoz no I think the key problem is Vue new feature setup script, by which developer can use all composition API like ref、onMounted directly after adding the seup attribute for script tag without import anything. probably environment should move form vue-cli to @vue/cli

[Theiaz]

Had the same issue today. Blocker for me to use codesandbox more frequently.

[holazz]

same issue.

[Yoduh]

<script setup> seems impossible to use with codesandbox. I hope this gets more attention as its becoming a more and more popular way to write components with Vue 3

[dojo-coder]

same issue

[xiangrikuil]

same issue

[LowLifeArcade]

I wonder why this is still not working

[zymbth]

Looking forward to the support of vue3 syntax sugar <script setup>. At present, I have to convert my code by setup()

[zymbth]

您好，邮件已收到，谢谢！

[danilowoz]

We just merged a fix that address:

• Error on deleting a script or style tag;
• Support for <script setup>;

Here's a sandbox: https://codesandbox.io/s/charming-turing-oe2n17?file=/src/App.vue

Could someone please confirm that it's working?

[jerrywu001]

We just merged a fix that address:

• Error on deleting a script or style tag;
• Support for <script setup>;

Here's a sandbox: https://codesandbox.io/s/charming-turing-oe2n17?file=/src/App.vue

Could someone please confirm that it's working?

When will it be released?

[danilowoz]

It should already be live on CodeSandbox and [email protected]