[SOLVED] Vue3 Codesandbox unexpected token using <script setup>

Vue3 Codesandbox unexpected token using <script setup>

I am running into the following error:

/src/components/Screen.vue: Unexpected token (9:6)

But I'm unable to see any sort of issue that could be causing this:

https://codesandbox.io/s/gifted-pond-5b9lfe?file=/src/components/Screen.vue

My Screen.vue file looks like the below:

<template>
  <div class="screen">
    <h1>Screen</h1>
    <Field
      v-for="(field, f) in screen.fields"
      :key="`field-${f}`"
      :field="field"
    ></Field>
  </div>
</template>

<script setup>
  import Field from "./Field.vue";
  import { defineProps } from "vue";
  defineProps({ screen: Object });
</script>

<script>
  export default {
    name: "Screen",
  };
</script>

Have I missed something? I'm not very familiar with Vue3 or developing on CodeSandbox.

Solution

There were couple issues, you had both and another script tag with export default {}.

Deleting second tag cleared some issues, but for some reason I still couldn't get it to work with , not sure if it's me or codesandbox lol(probably me). But using defineComponent seems to get it working.

I renamed couple variables for clarity, mainly index in v-for's

https://codesandbox.io/s/jovial-williamson-owkmdk?file=/src/App.vue

But it does work as expected in StackBlitz: https://stackblitz.com/edit/vitejs-vite-mfbrip?file=src/App.vue