Check the render method of `i`

[TommySorensen]

I stumble upon the following warning when i use the next-video component as intended.

Check the render method of `i`. See https://react.dev/link/warning-keys for more information.
Each child in a list should have a unique "key" prop.

I used Cursor to dive into the next-video codebase so it could find the specific bug causing this warning. I therefore added a bug report here, but was to lazy to write it myself, so i got cursor to do it 😆

---

Bug Report

React warning: "Each child in a list should have a unique key" when using NextVideo component.

Affected Versions

• 2.3.0
• 2.5.0

Location

dist/components/video.js lines 44-85

Problem

The component renders children in an array without keys:

return /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}next-video-container`, style, children: [
  /* @__PURE__ */ jsx("style", { ... }),           // No key
  /* @__PURE__ */ jsx(VideoPlayer, { ... }),       // No key
  DEV_MODE && /* @__PURE__ */ jsx(Alert, { ... })  // Conditional, no key
] });

Steps to Reproduce

1. Use NextVideo component in development mode
2. Open browser console
3. See warning: "Each child in a list should have a unique 'key' prop"

Expected Behavior

No React warning in console.

Suggested Fix

Add keys to the children:

return /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}next-video-container`, style, children: [
  /* @__PURE__ */ jsx("style", { key: "style", ... }),
  /* @__PURE__ */ jsx(VideoPlayer, { key: "player", ... }),
  DEV_MODE && /* @__PURE__ */ jsx(Alert, { key: "alert", ... })
] });

[dikaio]

Also seeing the same thing.

[spuppo-mux]

Hello, thanks for reporting this issue! I am looking into it.

I am testing this in the example and I can confirm this is happening consistently when rendering the video component. Apparently it is not the NextVideo container, but the components used within the Media component (src/components/players/media/index.tsx) that cause this.

In this case, the i element refers to the MuxVideo component. I could verify this by changing the code a bit and setting the displayName locally. I added this PR to make this message clearer.

I also found that when reloading the page, with the Hls element or the Dash element selected, the message changes to this (and the same with Dash):

Check the render method of `HlsVideo`. See https://react.dev/link/warning-keys for more information.
Each child in a list should have a unique "key" prop.

which lead to the previous finding.

I could not find a way to fix this from this repo yet, but I did find this issue in ce-la-react (the package used to build these react components). We will delve a bit into this fix and that should ideally fix this issue.