Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError with example component and React 18.18.2 #41

Open
mcadotsch opened this issue Mar 21, 2024 · 3 comments
Open

Uncaught TypeError with example component and React 18.18.2 #41

mcadotsch opened this issue Mar 21, 2024 · 3 comments

Comments

@mcadotsch
Copy link

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
Copy link
Owner

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

@scamden
Copy link

scamden commented Aug 17, 2024

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

@EgMan
Copy link

EgMan commented Sep 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants