[BUG] selectedOptionStyle and variant are missing from Select types.

[xobotyi]

Description

selectedOptionStyle and variant are missing from types. It is passed to component itself, but causing type error.

As a temporary solution i had to thow // @ts-expect-error to silnce typescipt.

For the variant TS error is:
Property  variant  does not exist on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<{ value: string; label: string; }, true, { label: string; options: { value: string; label: string; }[]; }>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.

For the selectedOptionStyle is:
Property  selectedOptionStyle  does not exist on type 'IntrinsicAttributes & Omit<PublicBaseSelectProps<{ value: string; label: string; }, true, { label: string; options: { value: string; label: string; }[]; }>, StateManagedPropKeys> & Partial<...> & StateManagerAdditionalProps<...> & RefAttributes<...>'.

chakra-react-select Version

4.7.0

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Try to use selectedOptionStyle or variant props on Select component

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

"typescript": "^5.1.6"

[csandman]

I'm having trouble reproducing this issue, but it seems to be a problem with the module augmentation piece where I add extra keys to react-select's core types. Can you give me more info about your environment? For example:

• How are you using react, with Next.js? Vite?
  • What version are you using of any relevant package, e.g. React, react-dom, next, @chakra-ui/react?
• Was this happening on the last version of chakra-react-select?
• Do you have react-select installed by anything other than chakra-react-select? As in, on it's own, or by another package that wraps it?

And finally, if you could give me a reproduction of any kind, or even just a code snippet, that could help a lot.

[Joeao]

I'm running two projects with the same package versions (chakra v2.8.1, chakra-react-select v5.7.2), but different package managers. The project using npm has no issue, the one using yarn/bun is showing error for non react-select props. E.g. variant or size.

Seems like npm knows to merge react-select & chakra's props, whereas the yarn/bun one doesn't. The issue being related to the module augmentation file makes sense.

I believe if you install this package with either yarn or bun, you'll be able to recreate this issue.

[csandman]

@Joeao So I have this package set up with yarn as well, but I haven't had any issues with this. Can you tell me which version of yarn you're using? Also, can you check if you have multiple versions of the base react-select in your yarn.lock for some reason? Also which version of TypeScript are you on?

[Joeao]

Sure. For the sake of potential reproduction I've switched back to yarn, from bun. Starting with a fresh yarn.lock.

There's only one version of react-select (5.7.4) in the yarn.lock. Which is the dependency of this module. Typescript version is 5.2.2. Yarn version is 3.6.3.

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ],
    },
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "./src/*"
  ],
  "exclude": ["worker/**/*"],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

[fp-not]

Same issue for me, i just start a new project with Vite and

"chakra-react-select": "^4.7.2"
"typescript": "^5.2.2"

like a workaround i pass the unsupported props with spread syntax and any type to skip the type validation, but i hope to find a better solutions

const rest: any = {
  variant: 'main',
  selectedOptionColorScheme: 'brand',
  chakraStyles,
  isInvalid: !isValidated,
};

return (
  <Select
    isClearable={isClearable}
    options={options}
    isMulti={isMulti}
    placeholder={placeholder}
    onChange={handleChange}
    onBlur={handleBlur}
    isDisabled={disabled}
    {...rest}
  />
)

[csandman]

Ok I finally had a chance to dig into this, and I believe it has nothing to do with the cli tool you use, but the module type in the tsconfig.json. I found an issue referencing this on the original react-select repo: JedWatson/react-select#5743. However, I think the issue's creator might be wrong as to the exact reason, because even after changing the dependency version on react-select to v5.7.2 (before the PR#5626, which he claims caused the issue) I was still getting the issue.

Apparently the issue is with using moduleResolution="bundler", and I believe also "node16" or "nodenext". I'm not sure what the issue is exactly, because I don't understand how module augmentation works that well in general, but changing the moduleResolution back to node10 (used to just be called node which still works) seems to fix the issue.

• Not working with moduleResolution="bundler" - https://codesandbox.io/p/sandbox/khdm6y?file=%2Fsrc%2Fmain.tsx
• Working with moduleResolution="Node10" (or "node") - https://codesandbox.io/p/sandbox/bun-vite-chakra-react-select-moduleresolution-node10-lxc6qf?file=%2Fsrc%2Fmain.tsx%3A16%2C22

@Joeao in your example tsconfig, it appears you are actually using "moduleResolution": "Node" though, which is confusing to me. Are you sure that's the one that wasn't working?

---

I will continue to update this issue as I learn more about the subject., but for now try changing moduleResolution to node10 or node if you have the option to.

[csandman]

Ok, so I put in a little more time trying to figure out a fix for this. I first tried using patch-package to patch the package.json to include the exports necessary for the module augmentation to work with the bundler module resolution. I was able to get a patch made, but it didn't seem to propagate when this package was installed. Check out #284 if you'd like to see the failed example CodeSandbox from that attempt.

After that I just went ahead and made a PR to React Select to try and actually fix the issue. You can check out all of the details here: JedWatson/react-select#5762

There was already a PR open on react-select to fix this issue, but it was technically incomplete, as it was causing the build to fail, so I tried to make one more likely to be merged. However, the React Select maintainers aren't the best about keeping up with issues and PRs, so if you guys want to help the process along it might help if you interact with the PR in some way haha.

[Joeao]

Thanks for spending the time on this issue. I can confirm that "moduleResolution": "Node" was used in both the project affected by this issue, but also in the project that is not affected by this issue... I hope that this doesn't complicate things.

[csandman]

Thanks for spending the time on this issue. I can confirm that "moduleResolution": "Node" was used in both the project affected by this issue, but also in the project that is not affected by this issue... I hope that this doesn't complicate things.

Honestly, the real issue is that any project that uses the package.json exports field instead of the older main or module fields would be affected. I'm really not an expert on all of those, but I'd assume that which one is picked is based on a variety of factors, including your node version and project setup.

Hopefully this fixes the issue, but if not it's still definitely a step in the right direction!

[csandman]

but I'd assume that which one is picked is based on a variety of factors, including your node version and project setup.

On that note actually, @Joeao do you have any other info you can give me about your setup? Like what node version you're using? And are you using something like Vite or Nextjs? There might be some further reason there I haven't though of.

[Joeao]

Both projects are using the same version of Vite (4.4.9), same version of Node (18.17). Same version of Typescript too (5.1.x)

[csandman]

Both projects are using the same version of Vite (4.4.9), same version of Node (18.17). Same version of Typescript too (5.1.x)

Huh, that's very odd then. Are the tsconfig files set up exactly the same way? If not, could I see both? I'm also curious what's in the "./tsconfig.node.json" file.

And regardless, I still have a strong feeling that my PR to react-select will fix the issue, I'm just trying to learn as much as I can about this issue in case it doesn't

[Joeao]

I removed tsconfig.node.json as it wasn't actually needed.

Now, by going through each mismatching compilerOption in tsconfig.json between both projects, setting moduleReslution: "Node" will prevent this issue, whereas setting moduleResolution: "bundler" will cause this issue. This contradicts my previous comment as tsconfig.node.json did have bundler set on the broken project and Node set on the working project. So I believe that the value was overriding what was inside the main tsconfig.json.

[csandman]

@Joeao Aah ok, that would make sense! Thanks for looking further into it, that gives me more confidence that my PR should fix the issue.

[csandman]

So I decided that this issue is more important than being on the latest version of react-select so I pushed a new version of this package that relies on a lower version. I'm not too worried about this as they're only a few patch versions ahead of the version required for this to work properly, and I will re-upgrade once my PR is merged in to react-select and keep you all updated here when when that happens. See the PR linked above for the full explanation.

[csandman]

Ok, there has been an update! The maintainers of react-select responded to my pull request and were able to give an alternative approach to the module augmentation that doesn't rely on augmenting the internal declaration files: JedWatson/react-select#5762 (comment)

This is what their docs had recommended previously, which is why I hadn't realized this approach was possible. Anyway, a real fix has been published in v4.7.5, so if you were having issues with this, please try out the new version and let me know if you're still having any problems!