[QUESTION] Eliminate unnecessary dependencies

[thinhnd028]

I use the package @chakra-ui/react and it contains all the packages that I get the warning message

warning " > chakra-react-select@3.1.2" has unmet peer dependency "@chakra-ui/form-control@^1.0.0".        
warning " > chakra-react-select@3.1.2" has unmet peer dependency "@chakra-ui/icon@^2.0.0".
warning " > chakra-react-select@3.1.2" has unmet peer dependency "@chakra-ui/layout@^1.0.0".
warning " > chakra-react-select@3.1.2" has unmet peer dependency "@chakra-ui/menu@^1.0.0".
warning " > chakra-react-select@3.1.2" has unmet peer dependency "@chakra-ui/spinner@^1.0.0".
warning " > chakra-react-select@3.1.2" has unmet peer dependency "@chakra-ui/system@^1.2.0".

can you remove them in upcoming updates

[csandman]

These dependencies are all required to make chakra-react-select work. If you have @chakra-ui/react installed that should cover them though. Do you currently have Chakra installed? If you do then this might be an issue with an older version of the npm cli (as in <7).

[thinhnd028]

i have installed chakra before and i see all the components you requested are included in this package except for the icon. I installed your package and got the message that those dependencies are not there yet. not a mistake, i agree that you can use the main package instead of the individual packages

[csandman]

The @chakra-ui/icon package does also comes with @chakra-ui/react (not @chakra-ui/icons).

What version of the npm cli are you using? npm --version

Because from version 7 onward, peer dependencies should be installed automatically. In addition, if you have @chakra-ui/react installed, the common dependencies between that and this package will be de-duped.

[thinhnd028]

yarn v1.22.18

---

Warning: Prop id did not match.

my solution:

const AsyncSelect = dynamic<any>(
  () => import('chakra-react-select').then((e) => e.AsyncSelect),
  { ssr: false }
);

Can you suggest any type in any type to help me?
And background property is not available

[csandman]

Ah so maybe it's an issue with the way yarn does peer dependency installations vs the npm cli.

I switched from having @chakra-ui/react as a peer dependency to the specific sub-dependencies that @chakra-ui/react uses in a recent version based on this discussion, in order to allow for its use in cases where someone doesn't have the whole package installed. I had worried about users needing to install the individual peer dependencies in addition to @chakra-ui/react, but in my testing I realized that from npm version 7.0.0 and above (released on October 13th, 2020), NPM will automatically install peer dependencies. This would also allow the peer dependencies to be de-duped between @chakra-ui/react and this package so if you already had it installed, this package's peer deps would not be installed again.

I can look into how yarn is affected by this change as well, as I'd prefer to keep the installation as simple as possible for the majority of users.

---

For the next question, I assume you're talking about a Next.js application, where the automatically generated IDs from react-select are being generated on the server and the client. The solution is to add the instanceId prop to your select component:

<AsyncSelect instanceId="async-select-instance" />

Here's the relevant section from the react-select docs:

instanceId

Define an id prefix for the select components e.g. {your-id}-value

One of<
  string,
  number
>

It's good to note that this warning isn't a breaking bug, and your app will run fine, but it can have performance implications.

In some cases you can also get this error from Chakra elements which have automatic ID generation such as the form control, as seen in these issues:

• Warning: Prop id did not match. Server: "popover-trigger-33" Client: "popover-trigger-6" chakra-ui/chakra-ui#3020
• Warning: Prop id did not match. Server: "accordion-button-3" Client: "accordion-button-6" chakra-ui/chakra-ui#4328

If you are still having the issue and you are wrapping your select in a FormControl, add an id to your FormControl component and that should fix your issue:

<FormControl id="my-async-select">
  <FormLabel>My Async Select</FormLabel>
  <AsyncSelect instanceId="async-select-instance" />
</FormControl>

---

And lastly, when you say "background property is not available" I'm not sure where you mean. You can use the chakraStyles prop to style any of the sub components in this package. If you're talking about the entire select component, then you probably want to add the background color to the control key of the chakraStyles object:

<AsyncSelect
  chakraStyles={{
    control: (provided) => ({
      ...provided,
      background: "blue.100"
    })
  }}
/>

[csandman]

To give a conclusive answer to the start of this post, there is nothing I can do about those installation warnings.

If you have @chakra-ui/react installed, then none of the warnings will cause you any errors, and these warnings are exclusive to yarn, as npm recognizes that all of these packages are installed as dependencies of a sibling dependency of chakra-react-select.

[csandman]

Scratch my last comment, there is something I can do, and I just did it in v3.3.5 and (v4.0.0-rc.1 for Chakra v2). All I had to do was move these packages from peerDependencies to dependencies which is the same way Chakra has all of their sub packages set up. If you install either of these versions, you should no longer get any warnings about missing peer deps.