The build is normal in other environments, but the following error occurs in my environment.

src/components/popup/CellInfoPopup.tsx:61:24 - error TS2786: 'NumberFormat' cannot be used as a JSX component.
  Its instance type 'NumberFormat<unknown>' is not a valid JSX element.

61                   <dd><NumberFormat value={meta.price} prefix="₩" thousandSeparator={true} displayType="text"/></dd>
                          ~~~~~~~~~~~~

src/components/popup/InvitationPopup.tsx:49:20 - error TS2786: 'CopyToClipboard' cannot be used as a JSX component.
  Its instance type 'CopyToClipboard' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/ksh/node_modules/@types/react/index").ReactNode'.

49                   <CopyToClipboard
                      ~~~~~~~~~~~~~~~

My settings.

OS : (ARM)MacOS Ventura 13.1

TypeScript : 4.9.4

Node : v18.13.0

npm : 8.19.3

yarn : 1.22.19

My package.json

{
  "name": "my-web-service",
  "version": "2.8.2",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@react-oauth/google": "^0.5.1",
    "@types/lodash": "^4.14.178",
    "@types/navermaps": "^3.0.13",
    "@types/uuid": "^9.0.0",
    "axios": "^0.24.0",
    "dayjs": "^1.10.7",
    "ga-gtag": "^1.1.1",
    "lodash": "^4.17.21",
    "next": "12.1.6",
    "qs": "^6.10.2",
    "rc-pagination": "^3.1.14",
    "react": "^17.0.2",
    "react-copy-to-clipboard": "^5.0.4",
    "react-dom": "^17.0.2",
    "react-lottie-player": "^1.4.1",
    "react-naver-maps": "^0.0.11",
    "react-number-format": "^4.9.1",
    "react-popup-manager": "^2.1.3",
    "react-query": "^3.34.0",
    "usehooks-ts": "^2.9.1",
    "uuid": "^9.0.0",
    "vite-plugin-html": "^3.0.6",
    "wouter": "^2.8.0-alpha.2",
    "zustand": "^3.6.7"
  },
  "devDependencies": {
    "@emotion/babel-plugin": "^11.7.2",
    "@types/node": "^18.11.18",
    "@types/qs": "^6.9.7",
    "@types/react": "^17.0.33",
    "@types/react-copy-to-clipboard": "^5.0.2",
    "@types/react-dom": "^17.0.10",
    "@types/uuid": "^9.0.0",
    "@vitejs/plugin-react": "^1.0.7",
    "typescript": "^4.4.4",
    "vite": "^2.7.0"
  }
}

Even if Node, Npm, and yarn are all reinstalled, the same error occurs. Which part is the problem?

CodePudding user response：

React components needs to return a single root element, I have a hunch your NumberFormat & CopyToClipboard components have a malformed return statement.

Ensure your components are not mapping elements like this

    function NumberFormat({ items }): JSX.Element {
        return items.map(item => (
            <>
                <li>{item.text}</li>
            </>
        )
    }

but rather return a single element, like so:

    function NumberFormat({ items }): JSX.Element {
        return <>{
            items.map(item => <li>{item.text}</li>)
          }</>
    }

CodePudding user response：

this error is usually caused by one of these 2 factors :

1. Your component is an array of jsx elements instead of one element
2. Returning a value other than a jsx element or null.

if it's not one of these two, and I believe it's not, because you said the build is normal in other environments then try to update your react typings :

npm : npm install --save-dev @types/react@latest @types/react-dom@latest yarn : yarn add @types/react@latest @types/react-dom@latest --dev

if you also want to update react and react-dom :

npm : npm install react@latest react-dom@latest yarn : yarn add react@latest react-dom@latest

if the problem still occurs then try to delete node_modules and package-lock.json and run npm install