Unexpected token exception thrown with inline conditional inside component property

[maxstevens-nl]

Related plugins

• [X] plugin-vue

• [ ] plugin-vue-jsx

Describe the bug

The bug shows up immediately as the Unexpected Token exception. Go to App.vue, and comment the import, or change the colon passed into the function to any other string which doesn't contain a colon, the exception disappears. I also included a (commented) version of the same code, spread over 3 lines, which also works.

We found this exception because our tests failed when trying to upgrade our Vue version, with the following output:

 FAIL  src/components/Component.test.ts [ src/components/Component.test.ts ]
SyntaxError: 
 ❯ instantiate node_modules/@babel/parser/lib/index.js:653:32
 ❯ constructor node_modules/@babel/parser/lib/index.js:946:12
 ❯ TypeScriptParserMixin.raise node_modules/@babel/parser/lib/index.js:3270:19
 ❯ TypeScriptParserMixin.unexpected node_modules/@babel/parser/lib/index.js:3300:16
 ❯ TypeScriptParserMixin.parseExprAtom node_modules/@babel/parser/lib/index.js:11262:16
 ❯ TypeScriptParserMixin.parseExprSubscripts node_modules/@babel/parser/lib/index.js:10872:23
 ❯ TypeScriptParserMixin.parseUpdate node_modules/@babel/parser/lib/index.js:10855:21
 ❯ TypeScriptParserMixin.parseMaybeUnary node_modules/@babel/parser/lib/index.js:10831:23
 ❯ TypeScriptParserMixin.parseMaybeUnary node_modules/@babel/parser/lib/index.js:9754:18
 ❯ TypeScriptParserMixin.parseMaybeUnaryOrPrivate node_modules/@babel/parser/lib/index.js:10669:61

The first Vue version which exhibits the bug is 3.2.40, so 3.2.39 works fine. Currently, moving the if statement to a new line (as shown in the reproduction) works fine, but it still remains quite a strange bug.

Reproduction

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

Steps to reproduce

The issue should be immediately visible.

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:
    vue: ^3.2.47 => 3.2.47

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[edison1105]

Closing as it can't reproduce with the latest version of vue. see playground