NodeJS 组件不能用作React中的JSX组件

23c0lvtd 于 2023-01-12 发布在 Node.js

关注(0)|答案(2)|浏览(211)

构建在其他环境中是正常的，但在我的环境中发生了以下错误。

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）Mac OS X
类型脚本：4.9.4
节点：版本18.13.0
国家预防机制：8.19.3
Yarn：1.22.19
我的软件包. 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都重新安装，也会出现同样的错误，问题出在哪一部分？

node.js

来源：https://stackoverflow.com/questions/75052447/component-cannot-be-used-as-a-jsx-component-in-react

2条答案

按热度按时间

flmtquvp1#

React组件需要返回单个根元素，我有预感您的NumberFormat & CopyToClipboard组件有一个格式错误的return语句。
请确保您的组件没有像这样Map元素

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>)
          }</>
    }

赞(0）回复(0）举报 2023-01-12

qacovj5a2#

该误差通常由以下两个因素之一引起：
1.您的组件是jsx元素的数组，而不是一个元素
1.返回jsx元素或null以外的值。
如果不是这两种类型中的一种，我相信不是，因为您说过构建在其他环境中是正常的，那么请尝试更新您的react类型：
纳米颗粒：npm install --save-dev @types/react@latest @types/react-dom@latestYarn：yarn add @types/react@latest @types/react-dom@latest --dev
如果您还想更新react和react-dom：
纳米颗粒：npm install react@latest react-dom@latestYarn：yarn add react@latest react-dom@latest
如果问题仍然出现，则尝试删除node_modules和package-lock.json并运行npm install

赞(0）回复(0）举报 2023-01-12

我来回答

NodeJS 组件不能用作React中的JSX组件

2条答案

相关问题

热门标签

最新问答