#I keep getting this error on page load

1 messages · Page 1 of 1 (latest)

broken flame
#

Is this the infamous useCopilotChatSuggestions bug?

pulsar lotusBOT
#

This solution has been AI generated

You’re seeing this because CopilotModal ends up rendering your children as an array, and some elements don’t have stable React keys. Wrap multiple children in a single container or provide unique keys when rendering arrays.

Why this happens

CopilotModal (and wrappers like CopilotSidebar/CopilotPopup) renders your children alongside its internal UI inside a Fragment. If your children are multiple elements or an array, React expects each child to have a unique key.

// Internal pattern (simplified)
<>
  {children}  // if this is an array, each item must have a key
  <div className="copilot-ui" />
</>

Fix options

  • Wrap multiple children in a single container:
// ✅ No keys needed
<CopilotSidebar>
  <div>
    <MyHeader />
    <MyContent />
  </div>
</CopilotSidebar>
  • Provide stable keys when rendering arrays:
// ✅ Keys added when mapping
<CopilotSidebar>
  {sections.map((s) => (
    <Section key={s.id} {...s} />
  ))}
</CopilotSidebar>
  • If you intentionally pass an array literal, add keys:
<CopilotModal>
  {[
    <MyHeader key="header" />, 
    <MyContent key="content" />
  ]}
</CopilotModal>

Additional checks

  • Avoid mixing v1 and v2 CopilotKit packages in the same app.
  • If you pass arrays via props (e.g., custom labels/icons), ensure each rendered element has a unique key.

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve: