[Turbopack] Warning: Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates

[jersoncarin]

Link to the code that reproduces this issue

https://github.com/jersoncarin/turbopack-warning-bug

To Reproduce

1. git clone https://github.com/jersoncarin/turbopack-warning-bug.git
2. npm install
3. npm run turbo (next dev --turbo)
4. open devtools and you will see the warning

Current vs. Expected behavior

Current Behavior:
Showing this warning app-index.js:31 Warning: Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Expected behavior
No warning using turbo

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
Binaries:
  Node: 21.1.0
  npm: N/A
  Yarn: N/A
  pnpm: 8.5.1
Relevant Packages:
  next: 14.0.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Turbopack (--turbo)

Additional context

I tested using the next dev without turbo it's working fine without any warning, but when I use next dev --turbo it will show the warning.

I tried also using the next@canary but it's same warning

[tosave04]

Same error messages with turbo since version 14 (only with turbo).

[jersoncarin]

Same error messages with turbo since version 14 (only with turbo).

I hope it will fix ASAP

[elquespera]

I have the same error after updating a project to Nextjs 14.

[optimbro]

I can confirm this, it only happens with --turbo, runs fine without --turbo flag. It's same with 13.5, and also with next@canary as of today's testing.

[heychazza]

Glad I'm not going crazy! I can also confirm that this only applies with Next.js v14 solely with --turbo. If I run it without it runs fine, using Node.js v21 if it helps.

[dylanhu7]

Having the same issue on macOS with Node 20

[norbusonam]

🙋‍♂️ same issue with turbo on w/ node v18.17.1 and nextjs 14.0.0

[gtonussi]

Having the same issue on macOS with Node 20

Having the same issue with that exact stack.

[winverse]

same issue with turbo in macOS, node 18.16, next 14.0.1

add console.log

/dist/esm/client/components

 */ export default function OuterLayoutRouter(param) {
    let { parallelRouterKey, segmentPath, childProp, error, errorStyles, errorScripts, templateStyles, templateScripts, loading, loadingStyles, loadingScripts, hasLoading, template, notFound, notFoundStyles, styles } = param;
    console.log('OuterLayoutRouter', param)  // add log
    ....
}

print

OuterLayoutRouter {
  parallelRouterKey: 'children',
  segmentPath: [ 'children' ],
  hasLoading: false,
  error: [Function: Error],
  errorStyles: [
    {
      '$$typeof': Symbol(react.element),
      type: 'link',
      key: '0',
      ref: null,
      props: [Object],
      _owner: null,
      _store: {}
    }
  ],
  errorScripts: [],
  template: {
    '$$typeof': Symbol(react.element),
    type: {
      '$$typeof': Symbol(react.lazy),
      _payload: [Promise],
      _init: [Function: K]
    },
    key: null,
    ref: null,
    props: {},
    _owner: null,
    _store: {}
  },
  notFound: {
    '$$typeof': Symbol(react.element),
    type: {
      '$$typeof': Symbol(react.lazy),
      _payload: [Promise],
      _init: [Function: K]
    },
    key: null,
    ref: null,
    props: {},
    _owner: null,
    _store: {}
  },
  notFoundStyles: [
    {
      '$$typeof': Symbol(react.element),
      type: 'link',
      key: '0',
      ref: null,
      props: [Object],
      _owner: null,
      _store: {}
    }
  ],
  childProp: { current: [ null, [Object], null ], segment: '(list)' },
  styles: [
    {
      '$$typeof': Symbol(react.element),
      type: 'link',
      key: '0',
      ref: null,
      props: [Object],
      _owner: null,
      _store: {}
    },
    {
      '$$typeof': Symbol(react.element),
      type: 'link',
      key: '1',
      ref: null,
      props: [Object],
      _owner: null,
      _store: {}
    },
    {
      '$$typeof': Symbol(react.element),
      type: 'link',
      key: '2',
      ref: null,
      props: [Object],
      _owner: null,
      _store: {}
    },
    {
      '$$typeof': Symbol(react.element),
      type: 'link',
      key: '3',
      ref: null,
      props: [Object],
      _owner: null,
      _store: {}
    },
    {
      '$$typeof': Symbol(react.element),
      type: 'script',
      key: '0',
      ref: null,
      props: [Object],
      _owner: null,
      _store: {}
    }
  ]
}
... more

/dist/compliled/react-dom/cjs

function warnOnInvalidKey(child, knownKeys, returnFiber) {
        {
          if (typeof child !== 'object' || child === null) {
            return knownKeys
          }

          switch (child.$$typeof) {
            case REACT_ELEMENT_TYPE:
            case REACT_PORTAL_TYPE:
              warnForMissingKey(child, returnFiber)
              var key = child.key

              if (typeof key !== 'string') {
                break
              }

              if (knownKeys === null) {
                knownKeys = new Set()
                knownKeys.add(key)
                break
              }

              if (!knownKeys.has(key)) {
                knownKeys.add(key)
                break
              }

              console.log('warnOnInvalidKey child', child)
              console.log('warnOnInvalidKey key', key) 
              console.log('warnOnInvalidKey REACT_PORTAL_TYPE', REACT_PORTAL_TYPE)
              error(
                'Encountered two children with the same key, `%s`. ' +
                  'Keys should be unique so that components maintain their identity ' +
                  'across updates. Non-unique keys may cause children to be ' +
                  'duplicated and/or omitted — the behavior is unsupported and ' +
                  'could change in a future version.',
                key,
              )

              break

            case REACT_LAZY_TYPE:
              var payload = child._payload
              var init = child._init
              warnOnInvalidKey(init(payload), knownKeys, returnFiber)
              break
          }
        }

        return knownKeys
      }

print

result

I tried to import the CSS files, but I encountered an 'invalid key' error because of a duplicated key.

code

view source code

[distor-sil3nt]

I have the same issue with 14.0.1-canary.3 and turbopack with Node.js v21.1.0. Pls fix this asap. Thx for your time and effort!

[pavelbe]

I have the same problem in "next": "14.0.1" with the --turbo flag.
The problem is there even on a NEW clean project. ☹️☹️☹️
Please fix this as soon as possible.
Thanks for your work!

[gtonussi]

Using Turbopack I am also receiving an error loading local fonts using next/font. It returns a not found. Unrelated issue but shows that some mapping is not right.

[digitaltopo]

Same issue: Warning: Encountered two children with the same key

[Supernubb]

+1

[spencerbeggs]

I see this on MacOS Sonoma 14.2, Node 18.13.0 and Next 14.0.1. Removing --turbo from next dev gets rid of the error and, sadly, turbo.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.