Unexpected token, expected "," when using defineProps with computed (escaped) object key #184
Description
Related plugins
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
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.9Used 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.