Bun: Warning: Each child in a list should have a unique "key" prop.

what.md

so we have tes.jsx:

export default function SearchField() {
  return (
    <form>
      <label>1</label>
      <input id="sidebar-search-input" />
    </form>
  );
}

And if we compile it with JSX transform we will get something like this:

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function SearchField() {
    return (_jsxs("form", { children: [_jsx("label", { children: "1" }), _jsx("input", { id: "sidebar-search-input" })] }));
}

source

But if I bundle the same file with Bun it will produce something like this:

// test.jsx
import {
jsx
} from "react/jsx-runtime";
function SearchField() {
  return jsx("form", {
    children: [
      jsx("label", {
        children: "Search for a note by title"
      }),
      jsx("input", {
        id: "sidebar-search-input"
      })
    ]
  });
}
export {
  SearchField as default
};

which will give us warning Warning: Each child in a list should have a unique "key" prop. because we are using jsx instead of jsxs for an array of children