Types not being picked up

[DRD161]

After following the install instructions I am able to properly import the package; however, when hovering over component props (isMulti, name, etc.), I do not get type information as shown in the code sandbox. Just want to make sure it's not user error (probably is) 😅

[csandman]

Can you give me some more info about your environment? What version of the following are you on:

• Chakra,
• Charka React Select
• TypeScript (if using typescript)

If you are using TypeScript, what's your TS Config setup? And are you using a React framework like Next.js or Vite?

---

The one thing I could recommend to at least try (without having more info) is just to completely delete your node_modules folder. Or if that doesn't do anything, there's a chance you have a dependency mismatch somewhere. You could try fixing that by running npm upgrade or yarn upgrade to get all of your modules resolved to shared versions.

Also, remember that Chakra React Select v6 is only compatible with Chakra UI v3, and Chakra React Select v5 and below is only compatible with Chakra UI v2.

Oh, and one other thing to check is if you have react-select installed separately from chakra-react-select. If you do, there could be a duplicate dependency issue going on there.

[DRD161]

Thanks for the reply! This is for work so the amount of info I'm able to provide is limited. Here is what I can provide:

Packages:
Chakra UI: "@chakra-ui/react": "^3.2.3"
Next.js: "next": "14.2.21"
TypeScript: "typescript": "5.7.2"
Chakra React Select: "chakra-react-select": "^6.0.0"

TS config:

{
  "extends": "tsconfig/react-library.json",
  "compilerOptions": {
    "baseUrl": ".",
    "esModuleInterop": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
  },
  "include": ["."],
  "exclude": [
    "dist",
    "build",
    "coverage",
    "node_modules",
    "jest.config.cjs",
    "mock/MatchMedia.ts",
    "package-scripts.cjs"
  ]
}

I checked and I do not have react-select installed separately. I also tried removing the node_modules without any luck.

[csandman]

Oh, I forgot to ask, what version of React/React Dom are you on too? I don't have time to look at this right now, but I can take a look a bit later, and that will help me a bit.

[csandman]

Also, I'm curious what the base of the config is from tsconfig/react-library.json. This problem seems like it could be due to a tsconfig issue, but I'm not positive.

And one other thing that would be good to check is what version of TypeScript your editor is on. If you're using VSCode, you might want to check to ensure that the editor is on the VSCode version your project is using. If you open the command palette, you can look for "TypeScript: Select TypeScript Version...". Then select "Use Workspace Version".

[DRD161]

So oddly enough I opened the app in VS Code and was able to at least get some type info when hovering (although not to the extent shown in the code sandbox). My primary IDE is WebStorm which does not give me any type info for props and is currently set to TypeScript version 5.7.2. The other info can be found below. I appreciate your help!

Package versions:
"react": "^18.2.0",
"react-dom": "^18.2.0"

Base config from react-library.json:

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "React Library",
  "extends": "./base.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["ES2015"],
    "module": "ESNext",
    "target": "es6"
  }
}

As you mentioned I have a feeling there is some sort of mismatch or conflict occurring, I'm just not 100% sure.

[csandman]

When you say "at least get some type info", what do you mean exactly? What's the difference between the code sandbox and what you're seeing in VS Code?

[DRD161]

Here are some screenshots of the differences. The code sandbox provides more detail regarding types. VS Code provides some detail and WebStorm provides none.

Code Sandbox:

VS Code: