[BUG] Importing any component displays export conflict warnings with react-select

[mattcoker]

Description

I just started a new project, and am trying out this library for the first time. I'm pretty sure my package versions are appropriate. The warnings (at the bottom of this description) are displayed even if the chakra-react-select components are imported but not rendered.

import { Select } from "chakra-react-select";

Versions

{
  "@chakra-ui/react": "2.4.2",
  "@emotion/react": "11.10.5",
  "@emotion/styled": "11.10.5",
  "framer-motion": "7.6.19"
  "chakra-react-select": "4.4.2"
}

Here is the output I'm getting, all warnings.

../../node_modules/chakra-react-select/dist/esm/index.js
The requested module 'react-select/async' contains conflicting star exports for the name '__esModule' with the previous requested module 'react-select'

../../node_modules/chakra-react-select/dist/esm/index.js
The requested module 'react-select/async-creatable' contains conflicting star exports for the name '__esModule' with the previous requested module 'react-select'

../../node_modules/chakra-react-select/dist/esm/index.js
The requested module 'react-select/creatable' contains conflicting star exports for the name '__esModule' with the previous requested module 'react-select'

chakra-react-select Version

4.4.2

Link to Reproduction

No response

TypeScript?

• Yes I use TypeScript

Steps to reproduce

No response

Operating System

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

Additional Information

No response

[csandman]

Do you have react-select installed in addition to chakra-react-select?

[mattcoker]

@csandman I do not have it installed, that was my first thought.

I even nuked my node_modules and reinstalled to make sure I didn't have an orphaned version of it installed anywhere.

[csandman]

Ok, so what's the rest of your setup like? Are you using CRA? Nextjs? Remix?

[mattcoker]

Next 13 as part of a monorepo (powered by Turborepo) currently using the new app directory paradigm.

[csandman]

So I set up a project similarly to yours until the error was triggered, and I believe I figured out what is causing the issue. I'm not sure why it only started appearing in this setup, but I know how to fix it at least.

However, I'm pretty sure the error you listed above is just a warning and isn't actually what's breaking your app.

The app directory paradigm doesn't appear to play nicely with Chakra UI at all yet, and I couldn't even get an app working right with them together without errors being thrown left and right. Maybe the fault is on my end, though, and you've gotten farther than I have. If you can give me an example project setup with Chakra working fine and chakra-react-select not working, I'll take a look and see if there's anything else I can figure out. It could be just the next project files, it doesn't have to be a whole turborepo setup.

Also, the app directory paradigm is still a beta feature in Nextjs, so it could just be compatibility issues they're still working through.

[csandman]

So I pushed my fix for the bug listed here, try out v4.4.3 when you get a chance to see if the warning went away.

[mattcoker]

@csandman That fix took care of it, thank you so much!

[csandman]

Wait, is it fully working now?

[mattcoker]

Yup, the updated version completely eliminated the warnings as soon as I upgraded.

[csandman]

huh, was it functional beforehand, just with that additional warning? or was that completely preventing it from working?

[mattcoker]

It was just a warning, albeit one that displayed 3x for every page load (probably related to component rerenders).