Currently, I am working on a webpage using Next JS.
During development, everything works smoothly without any errors. However, when I build the project for the production environment, I encounter the following error message:
Type error: The 'children' prop of this JSX tag expects a single child of type 'ReactNode', but multiple children were provided.
Here is a snippet of my code:
import React, { useState } from "react";
import { IconContext } from "react-icons";
import { AiOutlineClose } from "react-icons/ai";
import Modal from "react-modal";
import styled from "styled-components";
import styledButton from "../button/styledButton";
import { ModalCloseButton } from "./ModalCloseButton";
interface ShowModalProps {
text: string,
children: React.ReactNode
}
const StyledModal = styled(Modal)`
position: relative;
margin: 50px auto 0;
text-align: center;
width: 100%;
height: 90%;
padding: 5%;
background-color: #555555;
box-sizing: border-box;
overflow-y: auto;
@media screen and (min-width: 768px) {
width: 40%;
height: 100%;
padding: 5%;
margin: 0 auto;
}
`
export default function ShowModal({ text, children }: ShowModalProps) {
const [modalIsOpen, setIsOpen] = useState(false);
return (
<>
<styledButton text={text} handleModalState={setIsOpen} />
<StyledModal
isOpen={modalIsOpen}
style={{
overlay: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.6)',
}
}}
onRequestClose={() => setIsOpen(false)}
ariaHideApp={false}
className="animate__animated animate__fadeIn"
>
<IconContext.Provider value={{
style: {
width: "100%",
height: "100%"
}
}}>
<ModalCloseButton buttoncolor="#FFFFFF">
<AiOutlineClose onClick={() => setIsOpen(false)} />
</ModalCloseButton>
</IconContext.Provider>
<p>Modal</p>
{children}
</StyledModal>
</>
)
}
When I tried to modify the children type like this:
children: JSX.Element
or
children: JSX.Element|JSX.Element[]
It resulted in another error message like this:
Type error: 'Component' cannot be used as a JSX component.
Its element type 'ReactElement<any, any> | Component<{}, any, any> | null' is not a valid JSX element.
Type 'Component<{}, any, any>' is not assignable to type 'Element | ElementClass | null'.
Type 'Component<{}, any, any>' is not assignable to type 'ElementClass'.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/home/runner/work/next-web/next-web/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.
How can I resolve this issue?
Thank you!
Additional Note: This error occurred in the product environment hosted on AWS
Edit:
return (
<>
<p>Click Button!</p>
<ShowModal text="Next">
<form onsubmit={onSubmit}>
<input
type="text"
placeholder="write your first name"/>
<input
type="text"
placeholder="write your last name"/>
<button>submit</button>
</form>
</showModal>
</>
)