Unexpected token, expected "," when using defineProps with computed (escaped) object key

[sullyD64]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

Hi everyone. The following code in a Vue SFC raises a parsing error:

interface MyProps { // same with type alias
  bool?: boolean;
  msg?: string;
  'onUpdate:modelValue'?: (val: string) => void;
}

defineProps<MyProps>();

I'm opening this issue here because I've tested this behavior in the Vue SFC Playground without problems, hence I think the error occurs on the vite side. It seems that, at some point, vite-plugin-vue can't parse interfaces (or type aliases) containing computed (or escaped) object properties.

The error can be fixed by commenting the 'onUpdate:modelValue' prop or changing it to not be computed anymore (eg. onUpdateModelValue.

I've encountered this issue by using the new defineProps() to wrap a third party component (Quasar's QTable by extending its props (QTableProps), which contains some computed property names like onUpdate:pagination, onUpdate:selected and such.

I've reviewed Vue 3.3's announcement blog post and vuejs/core#8083 but I believe this case should not fall in the "complex types" category. Maybe this quote by Evan is the key to understand the problem:

Do note that complex types support is AST-based (not using TS itself) and therefore not 100% comprehensive.

Additional info: i'm encountering this error with both vite 2.9.15 (locally) and vite 4.3.9 (on stackblitz).

Reproduction

https://stackblitz.com/edit/vitejs-vite-sqq4aq?file=package.json,src%2Fcomponents%2FHelloWorld.vue&terminal=dev

Steps to reproduce

pnpm install && pnpm run dev

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^4.1.0 => 4.1.0 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

pnpm

Logs

Click to expand!

Unexpected token, expected "," (16:12)
16:28:50 [vite] Internal server error: Unexpected token, expected "," (16:12)
  Plugin: vite:vue
  File: /home/projects/vitejs-vite-sqq4aq/src/components/HelloWorld.vue:16:12
  20 |      <p>
  21 |        Edit
  22 |        <code>components/HelloWorld.vue</code> to test HMR
     |                ^
  23 |      </p>
  24 |    </div>
      at instantiate (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:63:32)
      at constructor (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:358:12)
      at TypeScriptParserMixin.raise (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:3255:19)
      at TypeScriptParserMixin.unexpected (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:3285:16)
      at TypeScriptParserMixin.expect (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:3627:28)
      at TypeScriptParserMixin.parseObjectLike (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:11662:14)
      at TypeScriptParserMixin.parseExprAtom (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:11182:23)
      at TypeScriptParserMixin.parseExprSubscripts (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:10890:23)
      at TypeScriptParserMixin.parseUpdate (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:10873:21)
      at TypeScriptParserMixin.parseMaybeUnary (file:///home/projects/vitejs-vite-sqq4aq/node_modules/.pnpm/@babel+parser@7.22.4/node_modules/@babel/parser/lib/index.js:10849:23)

Validations

• Follow our Code of Conduct
• 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.
• 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 vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

I guess this is a bug in Vue as it reproduces with Vue SFC Playground.