Subscribe on changes!

Duplicate key is generate when compiling vue SFC to JS

avatar
Sep 9th 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9U8GOmzAQ/ZVZLhApgLanCiWptntpparqoVIvvhgwxLv22LKdrKKIf++YhMBmpeUA9rzxm5n3zDl5srY4HkRSJRvfOGkDeBEOdsdQamtcgDM40cEAnTMaUkpNGTJsDPoA2vewjXiW/hBKGfhnnGof0hXDTXmhIyLaBKGt4kHQDmCzf9ydz+PhYdiUtBujEu0hwDHXphVqyxLCWULQprydTtbJpatcc1u8eIPU9zmeZlfAs6SCMRJj1G3cs2QfgvVVWfquidO++MK4vqRV4Q4YpBaF8DqvnXnzwhExSyLFwHCgkr/58ZfE1zuZFMeeuowVP5Xs2sUsmkBeK/Hz8StetQvuIEixC7qXrfgrgxJP2H7nbS/eJ01pdYSeDQaBgTLSL+TKElHc+xiv+9w6qbk7LWxrT8i1bGILf5yxMbExmtQXbZatYLuD7FWcKvDBSezXEHi0OfWWYzrCo8Cyg4z4OtkXnC7RPNZqMsCRLA6nHQCRWh72VVyspyCR39a+MVZUkPbK1Fyl1zjZML7iZ6KM1nx+y+hGPdNQBkmhib+SnixbGPANUknfPKRAZccBL9bH55jLjtKXUi9BvzdvBD98cGxOojkngjnYRG8ojJwKUMv5HV5NCbOTy7K1xJbAew+zZZvryazp4FURAPrv3l2dYRSXtCpvYt39csN/7o1dTg==

Steps to reproduce

  1. Open the playground by clicking on link
  2. View the generated JS output of NavLink.vue
  3. 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')), {
avatar
Nov 8th 2022

FYI the key in this case is redundant anyway.