"Invalid left-hand binding in function parameter list." Occurs in versions after v3.3.5

[Mini-ghost]

Vue version

3.3.7

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-w2khku?file=src%2FApp.vue

Steps to reproduce

1. Open reproduce.
2. An error message is displayed:

What is expected?

The code reproduces correctly in v3.3.4, and I'm not entirely sure what might be causing the error to appear in versions after v3.3.5, including 3.4.0-alpha.1. If there's a particular reason for this behavior, I would greatly appreciate your insights."

What is actually happening?

Vite display the following error message:

[plugin:vite:vue] Binding invalid left-hand side in function parameter list. (1:1)
/home/projects/vitejs-vite-w2khku/src/App.vue:1:1
1  |  <script setup lang="ts">
   |   ^
2  |  import Loop from './components/Loop.vue';
3  |
    at constructor (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:356:19)
    at TypeScriptParserMixin.raise (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:3223:19)
    at TypeScriptParserMixin.checkLVal (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:7443:12)
    at TypeScriptParserMixin.checkParams (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:11973:12)
    at TypeScriptParserMixin.eval (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:11948:14)
    at TypeScriptParserMixin.parseBlockOrModuleBlockBody (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:13210:56)
    at TypeScriptParserMixin.parseBlockBody (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:13187:10)
    at TypeScriptParserMixin.parseBlock (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:13175:10)
    at TypeScriptParserMixin.parseFunctionBody (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:11940:24)
    at TypeScriptParserMixin.parseArrowExpression (file:///home/projects/vitejs-vite-w2khku/node_modules/.pnpm/@babel+parser@7.23.0/node_modules/@babel/parser/lib/index.js:11915:10

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: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.9.2 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.3.7 => 3.3.7

Any additional comments?

N/A

[edison1105]

related to https://github.com/vuejs/core/pull/8538/files

[haoqunjiang]

Workaround: use a helper function

const getLoopSlotName = (item) => `item:${item.key}`;

<Loop :items="items">
  <template
    v-for="item in items"
    :key="item.key"
    #[getLoopSlotName(item)]="{ value }"
  >
    {{ value }}
  </template>
</Loop>