'ReactModal' cannot be used as a JSX component. #960

bokibo · 2022-08-16T08:28:31Z

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 · 2022-09-21T00:28:13Z

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 · 2022-09-21T00:33:13Z

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

btraut · 2022-09-21T00:38:51Z

  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 · 2022-09-21T01:17:08Z

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 · 2022-09-21T01:18:42Z

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 · 2022-09-21T01:20:48Z

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

memark · 2022-10-12T16:47:40Z

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 · 2022-10-25T15:00:29Z

I'm having the same problem :/

NathanVss · 2022-10-25T15:48:27Z

I have the solution.

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

yarn list --pattern "@types/react"

├─ @types/[email protected]
│  └─ @types/[email protected]
├─ @types/[email protected]
│  └─ @types/[email protected]
├─ @types/[email protected]

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 · 2022-10-25T16:12:40Z

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

bokibo · 2022-12-17T12:41:55Z

Hi everyone. Thanks for the answers. I haven't had time to respond so I did a rollback to react 17.
Today I had some free time I tried again and I get the same error. I agree it is a typescript thing but could someone help me solve it?

This is the component that uses Reactmodal. I did a thing with ModalSafeForReact18 that @btraut mentioned.

import React, {useEffect, useLayoutEffect, useState} from "react";
import ReactModal from "react-modal";
import {IAlertModalProps} from "./alertModal.props";
import {Overlay} from "../modal/Modal.style";
import AlertModalContainer from "./alert-modal-container/AlertModalContainer";
import Modal from 'react-modal';
import { ComponentType } from 'react';

ReactModal.setAppElement('#root');
const ModalSafeForReact18 = Modal as ComponentType<ReactModal['props']>;

const AlertModal: React.FC<React.PropsWithChildren<IAlertModalProps>> =
    ({isOpen, type, afterOpen, afterClose, closeModal, children}) => {
    return <ModalSafeForReact18
        isOpen={isOpen}
        onAfterOpen={onOpen}
        onAfterClose={onClose}
        contentElement={(props) =>
            <AlertModalContainer
                type={type}
                onClose={closeModal}
                {...props}>
                {children}
            </AlertModalContainer>}
        overlayElement={(props, contentElement) =>
            <Overlay {...props}>{contentElement}</Overlay>}
        overlayClassName={'overlay'}
    />
}
export default AlertModal

And the AlertModalContainer component

import React from "react";
import {Wrapper, CloseButton, Title, Icon} from "./AlertModalContainer.style";
import {AlertModalType} from "../alertModal.props";
interface IAlertModalContainerProps {
    type: AlertModalType,
    onClose: () => void
}
const AlertModalContainer: React.FC<IAlertModalContainerProps> =
    React.forwardRef<HTMLDivElement, IAlertModalContainerProps>(({type, onClose, children}) => {
    return <Wrapper>
        <Icon type={type}>{type === 'success' ?
            <i className={'ico-Check'}/> : type === 'error' ?
                <i className={'ico-Exit-outlined'}/> :
                <i className={'ico-Information-outlined'}/>}</Icon>
        <Title type={type}>{type === 'success' ? 'Success!' : type === 'error' ? 'Failure!' : 'Almost Done!'}</Title>
        {children}
        <CloseButton onClick={() => onClose()}>{type === 'success' ? 'Done' : 'Close'}</CloseButton>
    </Wrapper>
})
export default AlertModalContainer

And these are two errors I get.

on AlertModalContainer inside AlertModal component

TS2322: Type '{ children: ReactNode; key?: Key | null | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; defaultChecked?: boolean | undefined; ... 254 more ...; onClose: () => void; }' is not assignable to type 'IntrinsicAttributes & IAlertModalContainerProps'. Property 'children' does not exist on type 'IntrinsicAttributes & IAlertModalContainerProps'.

on children in AlertModalContainer component

TS2339: Property 'children' does not exist on type 'IAlertModalContainerProps'.

When I add children type to IAlertModalContainerProps as ReactNode then on the "overlayElement" I get

Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.

And when I change children to ReactElement then I get this error on children on AlertModalContainter

TS2322: Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor>'. Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor>'.

Could someone please help?

kento-hamaguchi-md · 2023-01-31T11:16:55Z

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.
This allows the Modal Component to specify a child component. What do you think?

(react-modal.d.ts)

import React from 'react'
import { OriginalProps } from 'react-modal'

declare module 'react-modal' {
    interface Props extends OriginalProps {
        children?: React.ReactNode
    }
}

diasbruno · 2023-02-01T00:01:49Z

@kento-hamaguchi-md Interesting...is this type definition also valid for React <18?

kento-hamaguchi-md · 2023-02-01T01:23:16Z

@diasbruno Yes. My project is React 18. I am able to build and run it without any problems.
However, this is not an essential solution, but an interim method.

I am sorry if this is not the cause of the issue in this Issue.

kento-hamaguchi-md · 2023-02-01T01:28:39Z

Sorry, the check on the VSCode editor seemed to resolve the problem, but in the actual build process, the problem continued.
I will look into it again to see if the type definition is not passing or if there are other underlying issues.

diasbruno · 2023-02-01T01:32:10Z

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

diasbruno · 2023-02-01T01:33:04Z

Keep me posted with your findings and I'll be happy to help.

kento-hamaguchi-md · 2023-02-01T09:23:34Z

I have tried many things, but adding this setting to tsconfig.json will make the type definitions strict at build time.

The type definition file that overrides the react-modal definition should be placed in src/types/global/react-modal.d.ts . It seems to be the specification that it should not be placed directly in types, but through, for example, global.

{
  "compilerOptions": {
    "typeRoots": ["src/types"],

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 react-modal.d.ts seems to work fine. I guess it depends on the environment of each project. Sorry for the reference, but the above is the result of our investigation.

diasbruno · 2023-02-01T15:45:42Z

Bom trabalho! This one is actually annoying as hell.

Here is a checklist:

Find which react and react-modal versions are incompatible
Understand the differences between type signature differences between react <18 and 18
Try to patch the definition and see if it's backwards compatible

chinanderm · 2023-02-11T23:54:53Z

Things that resolved it for me with React 18:

Latest version of react-modal (3.16.1)
Latest version of @types/react-modal (3.13.1)
Removed node_modules
Removed lock file
Reinstall all deps

dcristafovici · 2023-02-28T11:17:20Z

@chinanderm thank you, man. I tried before only to update to the latest version, but removing and installing all deps helped me.

diasbruno · 2023-02-28T13:10:35Z

@denibudeyko Would you like add this note on the readme? Well, it seems the way to go...

Namone · 2023-07-07T19:09:26Z

I had luck updating my .tsconfig.json in my project to the following:

{
  "compilerOptions": {
    "target": "es2020",
    "lib": [
      "dom",
      "dom.iterable"
    ],
    "paths": {
      "react": [ "./node_modules/@types/react" ],
      "dompurify": [ "./node_modules/@types/dompurify" ]
    },
    "strict": true,
    "jsx": "react",
  },
  "include": [
    "src/**/*"
, "tests"  ]
}

I previously had compilerOptions.jsx set to react-jsx; simply renaming it to react seemed to resolve the problem. Also being sure to import the relevant items under paths.

After that, I was able to build:

  115 B      build/1abe08b3249335736c0f016631f03702.js
  115 B      build/1d48b3a38a76bfc80d5718a91fd4c252.js
  115 B      build/23e579d49d8f8206607964d627b336b7.js
  115 B      build/49db9cf6f30a219cf140f7846d87a418.js
  115 B      build/a1883a50fa7e229ceeb72b409367a1b1.js
  115 B      build/b3c8fac34d63a9fe758b737a2560c911.js
  115 B      build/bf24eb9b91f882cafcfa6a7e8e3c56b1.js
  114 B      build/1046b30afca9b1942dd448bcafff2a95.js
  114 B      build/eab387dee57def86c245a3d71365a614.js
  114 B      build/f574c6ed6a178b4374b7c570ab2fce5f.js
  113 B      build/c98e74fc97b04fe8bf43dcdff549afcf.js
  112 B      build/0ffb18fb70c87335edee31a479f58a43.js

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

My package.json:

"dependencies": {
    "@auth0/auth0-react": "^2.1.1",
    "@ctrl/tinycolor": "^3.6.0",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@hookform/resolvers": "^3.1.0",
    "@material-ui/utils": "^4.11.3",
    "@mui/icons-material": "^5.13.7",
    "@mui/material": "^5.0.6",
    "@mui/styles": "^5.13.7",
    "@mui/utils": "^5.13.1",
    "@mui/x-data-grid": "^5.6.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@types/dompurify": "^3.0.2",
    "@types/node": "^16.11.25",
    "@types/react-dom": "^17.0.10",
    "@types/react-modal": "^3.13.1",
    "ace-builds": "^1.4.14",
    "dompurify": "^3.0.4",
    "history": "^5.3.0",
    "jss": "^10.10.0",
    "jss-preset-default": "^10.10.0",
    "moment": "^2.29.4",
    "mui-color-input": "^1.1.0",
    "react": "^18.2.0",
    "react-ace": "^9.5.0",
    "react-dom": "*",
    "react-hook-form": "^7.45.1",
    "react-modal": "^3.14.4",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "5.0.0",
    "style-loader": "^3.3.2",
    "typescript": "^4.4.4",
    "uuid": "^9.0.0",
    "uuidv4": "^6.2.13",
    "web-vitals": "^2.1.4",
    "yup": "^1.2.0"
  },

diasbruno added maybe bug versions labels Sep 21, 2022

diasbruno added not a bug and removed maybe bug labels Sep 21, 2022

diasbruno added the types definitions label Sep 21, 2022

diasbruno added the react label Oct 25, 2022

doeg mentioned this issue Feb 9, 2024

Refactor react-modal to use TypeScript #1037

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

'ReactModal' cannot be used as a JSX component. #960

'ReactModal' cannot be used as a JSX component. #960

bokibo commented Aug 16, 2022

btraut commented Sep 21, 2022

diasbruno commented Sep 21, 2022

btraut commented Sep 21, 2022 •

edited

Loading

diasbruno commented Sep 21, 2022

diasbruno commented Sep 21, 2022

diasbruno commented Sep 21, 2022

memark commented Oct 12, 2022 •

edited

Loading

NathanVss commented Oct 25, 2022

NathanVss commented Oct 25, 2022

diasbruno commented Oct 25, 2022 •

edited

Loading

bokibo commented Dec 17, 2022 •

edited

Loading

kento-hamaguchi-md commented Jan 31, 2023 •

edited

Loading

diasbruno commented Feb 1, 2023 •

edited

Loading

kento-hamaguchi-md commented Feb 1, 2023 •

edited

Loading

kento-hamaguchi-md commented Feb 1, 2023

diasbruno commented Feb 1, 2023

diasbruno commented Feb 1, 2023

kento-hamaguchi-md commented Feb 1, 2023

diasbruno commented Feb 1, 2023

chinanderm commented Feb 11, 2023

dcristafovici commented Feb 28, 2023

diasbruno commented Feb 28, 2023

Namone commented Jul 7, 2023 •

edited

Loading

'ReactModal' cannot be used as a JSX component. #960

'ReactModal' cannot be used as a JSX component. #960

Comments

bokibo commented Aug 16, 2022

btraut commented Sep 21, 2022

diasbruno commented Sep 21, 2022

btraut commented Sep 21, 2022 • edited Loading

diasbruno commented Sep 21, 2022

diasbruno commented Sep 21, 2022

diasbruno commented Sep 21, 2022

memark commented Oct 12, 2022 • edited Loading

NathanVss commented Oct 25, 2022

NathanVss commented Oct 25, 2022

diasbruno commented Oct 25, 2022 • edited Loading

bokibo commented Dec 17, 2022 • edited Loading

kento-hamaguchi-md commented Jan 31, 2023 • edited Loading

diasbruno commented Feb 1, 2023 • edited Loading

kento-hamaguchi-md commented Feb 1, 2023 • edited Loading

kento-hamaguchi-md commented Feb 1, 2023

diasbruno commented Feb 1, 2023

diasbruno commented Feb 1, 2023

kento-hamaguchi-md commented Feb 1, 2023

diasbruno commented Feb 1, 2023

chinanderm commented Feb 11, 2023

dcristafovici commented Feb 28, 2023

diasbruno commented Feb 28, 2023

Namone commented Jul 7, 2023 • edited Loading

btraut commented Sep 21, 2022 •

edited

Loading

memark commented Oct 12, 2022 •

edited

Loading

diasbruno commented Oct 25, 2022 •

edited

Loading

bokibo commented Dec 17, 2022 •

edited

Loading

kento-hamaguchi-md commented Jan 31, 2023 •

edited

Loading

diasbruno commented Feb 1, 2023 •

edited

Loading

kento-hamaguchi-md commented Feb 1, 2023 •

edited

Loading

Namone commented Jul 7, 2023 •

edited

Loading