Skip to content

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

@jasonlyu123

Description

@jasonlyu123

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions