[BUG] - Property 'children' does not exist on type 'IntrinsicAttributes & SelectProps<object>'.

[FredM7]

NextUI Version

2.6.11

Describe the bug

Using the Select component (and some other components as well, fyi, like Listbox) results in the following error being returned.

TS2322: Type '{ children: Element[]; onSelectionChange: (event: any) => void; selectedKeys: string; selectionMode: string; }' is not assignable to type 'IntrinsicAttributes & SelectProps<object>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & SelectProps<object>'.

This only appears to affect some components, not all of them... components like Card, Button etc works fine (it seems to me).

When I "go to definition" and into the types for the Select, I see no children property. I see a lot of properties as indicated in documentation, but even code search yields no results for children.

Your Example Website or App

https://github.com/doshexchnage/nextui-testing/blob/8a4866cb038dccd05ad305676c1cd19d287899d4/app/screens/main.tsx#L8-L14

Steps to Reproduce the Bug or Issue

1. Use Bun or Node (npm), both produces the same result. React 19.0.0 TailwindCSS 3.4.17 Webpack 5.97.1 Typescript 5.7.3
2. Create new React 19 project, add Tailwind, Typecript, etc packages to it, and setup NextUI manually.
3. Create a new page, and add a Select component to it.

const animals = [
  {key: "cat", label: "Cat"},
  {key: "dog", label: "Dog"},
  {key: "elephant", label: "Elephant"},
];

<Select className="max-w-xs" label="Select an animal">
  {animals.map((animal) => (
    <SelectItem key={animal.key}>{animal.label}</SelectItem>
  ))}
</Select>

5. Error

      TS2322: Type '{ children: Element[]; onSelectionChange: (event: any) => void; selectedKeys: string; selectionMode: string; }' is not assignable to type 'IntrinsicAttributes & SelectProps<object>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & SelectProps<object>'.

Expected behavior

Expect it to work as described in the docs 😄 or if the usage changed, to have that reflected in docs 😄

Screenshots or Videos

Operating System Version

Arch Linux

Browser

Chrome

[linear]

ENG-1857 [BUG] - Property 'children' does not exist on type 'IntrinsicAttributes & SelectProps<object>'.

[wingkwong]

Can you provide a sandbox? I couldn't see the error from my side. Also the error seems point to L18 (?) but the usage was commented tho.

When I "go to definition" and into the types for the Select, I see no children property. I see a lot of properties as indicated in documentation, but even code search yields no results for children.

children is in collections.d.ts. UseSelectProps > MultiSelectProps > MultiSelectStateProps > CollectionBase > children.

[FredM7]

Hi @wingkwong, by all means yes, here we have set up a basic webpack + react + typescript + tailwindcss project that uses NextUI:

https://github.com/doshexchnage/nextui-testing

Here is a permalink to the Select:
https://github.com/doshexchnage/nextui-testing/blob/8a4866cb038dccd05ad305676c1cd19d287899d4/app/screens/main.tsx#L8-L14

We use Bun, but I can confirm that I am able to replicate this with Node+NPM (Node 18) as well.

It seems to be a runtime error, so it only pops up after running bun run local or npm run local and when the component loads.

Let me know if there is anything else i can provide, or of there is anything else i should try my side. Thanks!

[wingkwong]

Just take a quick look. The given repo requires me to setup multiple things in order to get started. The current NextUI version should only support till react 19 rc since the upstream react-aria didn't support react 19 stable version yet. I bet this might be the reason. Can you try react 18 once to see if the error is gone?

[FredM7]

All that is required is to install the dependencies

npm install

and then to start the project

npm run local

you should not have to install or setup anything else to get it running 👍🏻

---

I have downgraded to these versions

    "react": "^18.3.1",
    "react-dom": "^18.3.1",

and i am still getting the exact same issue.

however, when i also downgrade NextUI to:

"@nextui-org/react": "^2.4.8",

then im able to render the Select

Right now my experience is that any version of NextUI later than 2.4.8 is failing with the children error.

---

Note that i also had to add this ts-ignore to my TSX

If i do not add the ts-ignore i still get the same children error even on NextUI 2.4.8.

Please see the new branch that i have added to the repo react-18:
https://github.com/doshexchnage/nextui-testing/blob/react-18/app/screens/main.tsx#L8-L15

I don't understand why the ts-ignore would be needed to render it successfully 🤔

[wingkwong]

seems something wrong with the compiler side. need further investigation.

[FredM7]

I should be around, albeit a bit slow to respond at times - but let me know if there is anything else to try / provide, I aim to be available for trying different things to assist in getting it resolved. Thanks! 🙏🏻

[antogno]

With NextUI I always had this problem when using TypeScript ^5.6.0. Using TypeScript ~5.5.0 solves the problem.

The following are the dependencies of my own package.json:

"dependencies": {
	"@astrojs/check": "^0.9.4",
	"@astrojs/netlify": "^5.5.4",
	"@astrojs/react": "^3.6.3",
	"@astrojs/tailwind": "^5.1.4",
	"@fontsource-variable/archivo": "^5.1.1",
	"@fontsource-variable/fira-code": "^5.1.1",
	"@fortawesome/fontawesome-svg-core": "^6.7.2",
	"@fortawesome/free-brands-svg-icons": "^6.7.2",
	"@fortawesome/free-regular-svg-icons": "^6.7.2",
	"@fortawesome/free-solid-svg-icons": "^6.7.2",
	"@fortawesome/react-fontawesome": "^0.2.2",
	"@nanostores/persistent": "^0.10.2",
	"@nanostores/react": "^0.8.4",
	"@nextui-org/react": "^2.6.11",
	"@types/react": "^18.3.18",
	"@types/react-dom": "^18.3.5",
	"astro": "^4.16.18",
	"astro-seo": "^0.8.4",
	"framer-motion": "^11.16.1",
	"nanostores": "^0.11.3",
	"node-emoji": "^2.2.0",
	"react": "^18.3.1",
	"react-dom": "^18.3.1",
	"tailwindcss": "^3.4.17",
	"typescript": "~5.5.4"
}