Duplicate key is generate when compiling vue SFC to JS
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
- Open the playground by clicking on link
- View the generated JS output of NavLink.vue
- Notice on line 40 & 41 Duplicate key is generated
What is expected?
There's is an unexpected key: 0
generated. It shouldn't generate that unwanted key.
What is actually happening?
Another key key: 0
is generated.
System Info
System:
OS: macOS 12.5.1
CPU: (8) arm64 Apple M1
Memory: 101.03 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Browsers:
Chrome: 105.0.5195.102
Safari: 15.6.1
npmPackages:
vue: 3.2.37 => 3.2.37
Any additional comments?
I have to use <TransitionGroup>
as wrapper so I have to add key to this dynamic component.
Moreover, this isn't resulting in any warning while development however in build it shows this warning:
vite v3.1.0 building for production...
transforming (1223) node_modules/@floating-ui/dom/dist/floating-ui.dom.esm.js[plugin:vite:esbuild] Duplicate key "key" in object literal
50 | ? _withDirectives((_openBlock(), _createBlock(_resolveDynamicComponent(_unref(config).app.enableI18n ? 'i18n-t' : 'span'), _mergeProps({
51 | key: 0,
52 | key: "badge",
| ^
53 | class: ["nav-item-badge", __props.item.badgeClass]
54 | }, _unref(dynamicI18nProps)(__props.item.badgeContent, 'span')), {