'ReactModal' cannot be used as a JSX component.

[bokibo]

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

[btraut]

I'm also encountering this. It seems to work fine with React 18, so here's my current workaroud:

import Modal from 'react-modal';
import { ComponentType } from 'react';

…

const ModalSafeForReact18 = Modal as ComponentType<ReactModal['props']>;

return <ModalSafeForReact18>…</ModalSafeForReact18>;

[diasbruno]

@btraut @bokibo Can you provide the actual error that this version is throwing, please?

[btraut]

  Its instance type 'Modal' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("<my app's path>/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

88     <Modal
        ~~~~~~~~~~

From what I can tell from my yarn.lock, it looks like "@types/react": "*" is resolving to version 17.0.34 and my app ("@types/react": "^18.0.20") is resolving to 18.0.20. Those are likely incompatible.

[diasbruno]

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.

[diasbruno]

I'm flaging as 'not a bug', because it isn't really a bug, but a type definition problem that affects only typescript projects.

[diasbruno]

Or...you can open a bug on the type repository and mention me, so I can follow up.

[memark]

I'm using react-modal 3.15.1 with @types/react-modal 3.13.1, react 18.2.0 and typescript 4.8.4 without any error like that. Could you please provide some actual code or a codepen/playground that gives this error, @bokibo?

[NathanVss]

I'm having the same problem :/

[NathanVss]

I have the solution.

I realized that some of the packages were still using @types/react@17.0.44 , including the react-modal one:

yarn list --pattern "@types/react"

├─ @types/react-dom@18.0.7
│  └─ @types/react@17.0.44
├─ @types/react-modal@3.13.1
│  └─ @types/react@17.0.44
├─ @types/react@18.0.22

This was caused by two things:

• @types/react-modal has this in its package.json:

    "dependencies": {
        "@types/react": "*"
    },

• I had this in my package.json

  "resolutions": {
    "@types/react": "17.0.44"
  }

Solution:

• I removed the resolutions part of my package.json file.
• Run rm -rf node_modules && rm yarn.lock && yarn install

Hope this helps ! 😗

[diasbruno]

@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.