Comments (16)
@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.
from chakra-react-select.
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.
from chakra-react-select.
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!
from chakra-react-select.
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 thanchakra-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.
from chakra-react-select.
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.
from chakra-react-select.
@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?
from chakra-react-select.
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"
}
]
}
from chakra-react-select.
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}
/>
)
from chakra-react-select.
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.
from chakra-react-select.
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.
from chakra-react-select.
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.
from chakra-react-select.
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!
from chakra-react-select.
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.
from chakra-react-select.
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)
from chakra-react-select.
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
from chakra-react-select.
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
.
from chakra-react-select.
Related Issues (20)
- [BUG] Warning: Prop `id` did not match. Server: HOT 1
- [BUG] name and required does not work with standard form validation HOT 2
- [BUG]: `colorScheme` doesn't get passed to input variants HOT 4
- selectedOptionStyle with isMulti HOT 1
- [BUG] Breaking Change in chakraui/icon HOT 6
- Property "size" does not exist on type HOT 1
- [BUG] "default" is not exported by "node_modules/@chakra-ui/icon/dist/index.mjs", imported by "node_modules/chakra-react-select/dist/esm/chakra-components/menu.js". HOT 1
- [BUG] useBasicStyles type error on Vite HOT 1
- [BUG] Group Heading props does not work HOT 3
- [Feature request] Allow adding some related keywords to dropdown items so that they can be searched based on those keywords HOT 1
- [BUG] Problem with accessibility of the CreatableSelect (nested interactive elements) HOT 1
- [BUG] peerDependencies to Chakra v2 still show up HOT 5
- [BUG] Cannot start the application when using chakra-react-select with Vite HOT 2
- [BUG] Custom components automatically switch to Chakra style instead of keeping default HOT 1
- [BUG]: No `ValueType` export for the `onChange` handler HOT 11
- property data-testid is not render
- [BUG] Version 4.7.6 breaks colors for selected item HOT 2
- [BUG] LoadOptions doesn't render options when isMulti = True and there is already one selected option in component HOT 1
- [BUG] Incompatible with Chakra UI Pro theme HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chakra-react-select.