Using Class Components without @Options annotation leads to "Transform failed"

[cypressious]

Describe the bug

According to vuejs/vue-class-component#406, when using Class Components with Vue 3, the @Options annotation is optional.

However, when leaving the annotation out, vite throws the following error:

[plugin:vite:vue] Transform failed with 1 error:
C:/Users/krakhman/Repos/vue3-playground/src/components/ClassComponent2.vue:2:41: error: Expected ";" but found "class"

C:/Users/krakhman/Repos/vue3-playground/src/components/ClassComponent2.vue:2:41

Expected ";" but found "class"
1  |  
2  |  import { Vue } from "vue-class-component"class ClassComponent extends Vue {
   |                                           ^
3  |    counter = 0
4  |  }

    at failureErrorWithLog (C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:1224:15)
    at C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:1072:33
    at C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:568:9
    at handleIncomingPacket (C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:657:9)
    at Socket.readFromStdout (C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:535:7)
    at Socket.emit (node:events:378:20)
    at addChunk (node:internal/streams/readable:313:12)
    at readableAddChunk (node:internal/streams/readable:288:9)
    at Socket.Readable.push (node:internal/streams/readable:227:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23

Reproduction

• Add [email protected] dependency
• Add the following component:

<template>
  <div>
    {{ counter }}
    <button @click="counter++">Increment</button>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";

export default class ClassComponent extends Vue {
  counter = 0
}
</script>

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Windows 10 10.0.19042
    CPU: (12) x64 AMD Ryzen 5 PRO 4650U with Radeon Graphics
    Memory: 13.93 GB / 31.23 GB
  Binaries:
    Node: 15.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.6.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.63)
    Internet Explorer: 11.0.19041.1

Used package manager: yarn

Logs

16:02:50 [vite] Internal server error: Transform failed with 1 error:
C:/Users/krakhman/Repos/vue3-playground/src/components/ClassComponent2.vue:2:41: error: Expected ";" but found "class"
  Plugin: vite:vue
  File: C:/Users/krakhman/Repos/vue3-playground/src/components/ClassComponent2.vue
  
  Expected ";" but found "class"
  1  |  
  2  |  import { Vue } from "vue-class-component"class ClassComponent extends Vue {
     |                                           ^
  3  |    counter = 0
  4  |  }
  
      at failureErrorWithLog (C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:1224:15)
      at C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:1072:33
      at C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:568:9
      at handleIncomingPacket (C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:657:9)
      at Socket.readFromStdout (C:\Users\krakhman\Repos\vue3-playground\node_modules\esbuild\lib\main.js:535:7)
      at Socket.emit (node:events:378:20)
      at addChunk (node:internal/streams/readable:313:12)
      at readableAddChunk (node:internal/streams/readable:288:9)
      at Socket.Readable.push (node:internal/streams/readable:227:10)
      at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[patak-dev]

@cypressious would you try to reproduce this without Vite? I think this is an issue with the Vue SFC compiler and it should be reported in the vue-next repo.

[cypressious]

@patak-js I just tried and it works with vue-cli.