组件不能在 React 中用作 JSX 组件

Question

在其他环境下构建是正常的，但是在我的环境下出现如下错误。

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
                      ~~~~~~~~~~~~~~~

我的设置。

操作系统：(ARM)MacOS Ventura 13.1

TypeScript：4.9.4

节点：v18.13.0

npm：8.19.3

纱线：1.22.19

我的 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"
  }
}

即使把Node、Npm、yarn都重装一遍，还是出现同样的错误。 哪一部分有问题？

Answer 1

React 组件需要返回单个根元素，我有预感你的NumberFormat和CopyToClipboard组件有一个格式错误的 return 语句。

确保您的组件不是这样映射元素

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

而是返回单个元素，如下所示：

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

Answer 2

此错误通常是由以下两个因素之一引起的：

1. 您的组件是一组jsx元素而不是一个元素
2. 返回 jsx 元素或jsx以外的null 。

如果它不是这两者之一，我相信它不是，因为你说构建在其他环境中是正常的然后尝试更新你的反应类型：

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

如果你还想更新 react 和 react-dom：

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

如果问题仍然存在，则尝试删除node_modules和package-lock.json并运行npm install