-
Notifications
You must be signed in to change notification settings - Fork 810
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
'ReactModal' cannot be used as a JSX component. #960
Comments
I'm also encountering this. It seems to work fine with React 18, so here's my current workaroud:
|
From what I can tell from my |
This is a typescript thing...it's very sad. I don't know how the react version is injected on the react-modal type definition, so I can't help. If you want to give it a try here is type definitions DefinitelyTyped/react-modal. It must be easy, but I don't have much time to work on this. |
I'm flaging as 'not a bug', because it isn't really a bug, but a type definition problem that affects only typescript projects. |
Or...you can open a bug on the type repository and mention me, so I can follow up. |
I'm using |
I'm having the same problem :/ |
I have the solution. I realized that some of the packages were still using
This was caused by two things:
Solution:
Hope this helps ! 😗 |
@NathanVss That's awesome. As this is related to types, this package is not the one to blame. This problem needs to be opened on https://github.com/DefinitelyTyped/DefinitelyTyped. |
Hi everyone. Thanks for the answers. I haven't had time to respond so I did a rollback to react 17. This is the component that uses Reactmodal. I did a thing with ModalSafeForReact18 that @btraut mentioned.
And the AlertModalContainer component
And these are two errors I get. on AlertModalContainer inside AlertModal component
on children in AlertModalContainer component
When I add children type to IAlertModalContainerProps as ReactNode then on the "overlayElement" I get
And when I change children to ReactElement then I get this error on children on AlertModalContainter
Could someone please help? |
Excuse my poor English. Component in React 18 can no longer pass children implicitly. To do this, we need to add a children field of type React.ReactNode to Props. Therefore, to extend the react-modal's Modal type in the project, the following type definition was written. (react-modal.d.ts) import React from 'react'
import { OriginalProps } from 'react-modal'
declare module 'react-modal' {
interface Props extends OriginalProps {
children?: React.ReactNode
}
} |
@kento-hamaguchi-md Interesting...is this type definition also valid for React <18? |
@diasbruno Yes. My project is React 18. I am able to build and run it without any problems. I am sorry if this is not the cause of the issue in this Issue. |
Sorry, the check on the VSCode editor seemed to resolve the problem, but in the actual build process, the problem continued. |
@kento-hamaguchi-md That's unfortunate, but great idea.This actually lines up with @bokibo's comment. You can find more information on https://github.com/DefinitelyTyped/DefinitelyTyped for the react-modal's type definition. |
Keep me posted with your findings and I'll be happy to help. |
I have tried many things, but adding this setting to The type definition file that overrides the react-modal definition should be placed in
However, after doing this and reviewing the Next.js Lint settings, etc., the build now passes even if the typeRoots setting is turned off. I am sorry, but I could not find out exactly what caused the problem. However, as for the type definition issue, the aforementioned |
Bom trabalho! This one is actually annoying as hell. Here is a checklist:
|
Things that resolved it for me with React 18:
|
@chinanderm thank you, man. I tried before only to update to the latest version, but removing and installing all deps helped me. |
@denibudeyko Would you like add this note on the readme? Well, it seems the way to go... |
I had luck updating my .tsconfig.json in my project to the following:
I previously had After that, I was able to build:
My package.json:
|
Hi,
I am using this component for certain and it works perfect, don't have any problems. But yesterday I tried to update react from v17 to v18 and after update I got this error
'ReactModal' cannot be used as a JSX component.
Is there any way to fix it so I could continue using this component or this is caused by new react version and fix is needed?
So far I did revert to react v17 and it works but in the future I would like to update to version 18.
Thank you
The text was updated successfully, but these errors were encountered: