react-transition-group
react-transition-group copied to clipboard
reactjs
'ReactCSSTransition' cannot be used as a JSX component. Its instance type 'CSSTransition<HTMLElement | undefined>' is not a valid JSX element.
What is the current behavior? 'ReactCSSTransition' cannot be used as a JSX component. Its instance type 'CSSTransition<HTMLElement | undefined>' is not a valid JSX element.
What is the expected behavior? It should be able to resolve with react 18
i updated to react 18 and my transition is breaking
Could you provide a CodeSandbox demo reproducing the bug? Its instance type 'Provider<AnyAction>' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'import("/Users/khoby/Kodes/Livoh/weba-app/node_modules/@types/testing-library__react/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
Had the same problem. My application has the following dependencies:
| Package | Version |
|---|---|
| react | ^18.2.0 |
| react-dom | ^18.2.0 |
| react-scripts | ^5.0.1 |
| react-transition-group | ^4.4.2 |
| @types/node | ^18.7.18 |
| @types/react | ^18.0.0 |
| @types/react-dom | ^18.0.0 |
| @types/react-transition-group | ^4.4.4 |
| typescript | ^4.8.3 |
I've tried to upgrade versions of @types/* packages using yarn specifying the latest versions of ones:
yarn upgrade react@^18.2.0 react-dom@^18.2.0 @types/react@^18.0.21 @types/react-dom@^18.0.6 react-transition-group@^4.4.5 @types/react-transition-group@^4.4.5
But it did not work. So, after that i tried to update all packages with yarn upgrade command without any parameter:
yarn upgrade
It helped me. May be it will help you too
I have the same problem, I had to add resolutions property in my package.json with 17.0.38 version of @types/react
I experienced the same issue. Messing around with dependency versions didn't help me. Turns out in my case the issue was caused by conflicting type definitions for JSX.Element between React and Vue, see: https://github.com/vuejs/core/issues/1033
I forced my app to compile by following the recommendation from https://github.com/vuejs/core/issues/1033#issuecomment-1176412645 and applying a local patch to Vue that removes the conflicting type (thankfully I only needed TypeScript to work with React in my project).
I'm having the same issue after running yarn upgrade. I'm using react 18, and adding resolutions property didn't work
Good old npx yarn-deduplicate && yarn helped me.
Otherwise.. delete your lock file and do a fresh install :)
