TypeError: Cannot read property 'Tag' of undefined

[dribeirodev]

I added your package to use multi select and my tests broke. Do you have any idea what it might be?

[csandman]

I need a little more info to have any idea whats going on with this?

• What version of chakra-react-select are you on?
• What testing library are you using?
• How are you implementing chakra-react-select? (props passed into it, parent element, etc)
• How is your test interacting with chakra-react-select or sibling elements?

[keithburgie-rts]

I'm also getting this error all of a sudden. The component was working fine and now it's not.

[jonahallibone]

@keeeeith are you on the latest version of the component?

[keithburgie-rts]

Yeah I think it was related to a dependency duplicate/conflict of the Emotion package. While searching I came across others who'd had a similar dependency problem with react-select. When I got that straightened out the error went away.

[csandman]

@keeeeith What did you end up having to do to get the conflict sorted out?

[keithburgie-rts]

@csandman The error started before my planned changes, but the changes were a pretty significant overhaul of my project so I don't think details will be much help to anyone else. I had a locally imported and symlinked component library that had Chakra UI as a dependency and I think that was part of the Emotion conflict.

Looking closer at my own screenshot right now, maybe my chakraTheme.components object was over-riding this package? I also import theme as chakraTheme and have a components object that doesn't include Tag.

import { extendTheme, theme as chakraTheme } from "@chakra-ui/react"

[magnuslinden]

I'm seeing the same TypeError: Cannot read properties of undefined (reading 'Tag') error in my tests, running:

{
  "@chakra-ui/react": "^1.7.2",
  "react-select": "^4.3.1",
  "chakra-react-select": "^1.3.4",
  "@emotion/react": "^11.7.0",
}

and testing with jest + react testing library.

EDIT:

To fix this I simply had to wrap my tests with <ChakraProvider>[...]</ChakraProvider>. Figured that out by looking at Chakra's own testing utilities found here: https://github.com/chakra-ui/chakra-ui/blob/main/tooling/test-utils/src/test-utils.tsx

I've got a bunch of tests that run fine without being wrapped in <ChakraProvider>, which threw me off when tests that had this package included failed, but not other ChakraUI components.

[csandman]

@magnuslinden That would probably be the standard answer to this question. This component accesses the global Chakra theme for styles in case a user has overridden any of them. I tried to avoid hardcoding any chakra styles where I could to keep things looking consistent.

@dribeirodev Does wrapping your tests in a <ChakraProvider /> fix your problem?