[QUESTION] Eliminate unnecessary dependencies

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]

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:

• https://github.com/chakra-ui/chakra-ui/issues/3020
• https://github.com/chakra-ui/chakra-ui/issues/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]

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.