albingroen/react-cmdk

Uncaught TypeError with example component and React 18.18.2

mcadotsch opened this issue · 3 comments

Hi, i am facing an issue using react-cmdk with React 18.18.2. I get the following error in the browser console:

Uncaught TypeError: Cannot read properties of undefined (reading 'Child')
at CommandPalette (CommandPalette.tsx:162:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

That's how my simple component looks like:

import "react-cmdk/dist/cmdk.css";
import CommandPalette from "react-cmdk";
import { useState } from "react";


const Cmdk = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [search, setSearch] = useState("");

  return (
    <>
      <CommandPalette
        onChangeSearch={setSearch}
        onChangeOpen={setIsOpen}
        search={search}
        isOpen={isOpen}
        children=""
      >
        <CommandPalette.List heading="General">
          <CommandPalette.ListItem
            children="Home"
            icon="HomeIcon"
            index={0}
          />
        </CommandPalette.List>
      </CommandPalette>
    </>
  );
};

export default Cmdk;

What am i doing wrong?

You have children="" on CommandPalette. Try removing that prop.

same issue with no children prop passed. seems to be coming from headless ui

Same issue here react 18. I just tried the example code verbatim.