albingroen / react-cmdk

A fast, accessible, and pretty command palette for React
https://react-cmdk.com
MIT License
1.09k stars 45 forks source link

Uncaught TypeError with example component and React 18.18.2 #41

Open mcadotsch opened 7 months ago

mcadotsch commented 7 months ago

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?

albingroen commented 4 months ago

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

scamden commented 2 months ago

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

EgMan commented 1 month ago

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