Subscribe on changes!

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

avatar
Oct 28th 2023

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: 截圖 2023-10-28 上午11 30 27

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

avatar
Nov 3rd 2023

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>