TypeScript prop autocomplete not working

Description

When I used any chakra component and specified props, I expected VSCode’s autocomplete to work by showing a subset of the available values (like sizes for Heading), but instead I saw no autocomplete appear and the prop was just typed as string.

Link to Reproduction

https://codesandbox.io/s/chakra-ui-typescript-pomi8 (I think this should do, but since this is specific to VSCode’s autocomplete, it might not be enough, and might need to clone locally and open VSCode to reproduce).

Steps to reproduce

Try to use any chakra component and see the autocomplete not work in VSCode. The TypeScript starter should be enough to reproduce. The project I’m using has "typescript": "^4.7.4" and "@chakra-ui/react": "^2.3.5". I confirmed my tsconfig.json is exactly the same as the example repo.

Chakra UI Version

2.3.5

Browser

N/A

Operating System

• macOS
• Windows
• Linux

Additional Information

I had a project with older TypeScript and chakra versions where the autocomplete was working ("typescript": "^4.3.0" and "@chakra-ui/react": "^1.4.2").

[aecorredor]

@anubra266 I got this to work. I updated the react type dependencies to match exactly what the codesandbox had. I think some discrepancies in types from older versions caused the issue, especially since react 18.

[anubra266]

@aecorredor Not this?