Subscribe on changes!

named import parser error with a trailing comma in v-on in ts

avatar
Sep 12th 2022

Vue version

3.2.39

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-ajkcsc?file=src/App.vue

Steps to reproduce

Write v-on with the object with a trailing comma and a named import. This is the minimal reproduction I can find. It doesn't have to be a multiple-line object literal. It's only in the Stackblitz repo because of the auto format.

<script lang="ts" setup>
import { ref } from 'vue'
</script>

<template>
  <button v-on="{  click: () => {}, }">
  </button>
</template>

What is expected?

No error. This works in 3.2.37 and it also works when I removed the lang="ts"

What is actually happening?

Parser error point to the lang="ts" or point to the named import.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 4800HS with Radeon Graphics
    Memory: 3.66 GB / 15.42 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.33)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: ^3.2.38 => 3.2.39

Any additional comments?

This started in 3.2.38. Not sure if this is a babel issue but there isn't an error if I moved the object to the script tag.