语义-用户界面-反应元素都有错误“不能用作JSX组件”。

Question

我有一个类型记录中的React应用程序，它使用语义-ui-react，但是由于所有SUR元素都有错误，它将不再编译，“不能用作JSX组件。”这个应用程序已经使用了大约两年，今天开始抛出这个编译错误。

我尝试过的事情：

1. 删除纱线锁和node_modules并重新安装依赖项
2. 降级/升级反应，反应反应，反应-脚本及其@类型
3. 降级/升级语义-用户界面反应包
4. 从回购和重新安装的依赖项中提取最后已知的良好工作package.json

我是使用纱线单回购设置，这是其中一个应用程序。

任何帮助都很感激！

TypeScript error in /Users/lerxstrulz/projects/test/web/src/components/MyMenu/index.tsx(18,8):
'Menu' cannot be used as a JSX component.
  Its instance type 'Component<MenuProps, any, any>' is not a valid JSX element.  TS2786

    17 |     return (
  > 18 |       <Menu>
       |        ^
    19 |         <Menu.Item>This is a menu item</Menu.Item>
       |          

样本代码：

import React from 'react';
import {Menu, Icon} from 'semantic-ui-react';

export const MyMenu = () => {
  const MenuItems = () => {
    return (
      <Menu> <-- this is throwing the error (as well as ALL SUR elements)
        <Menu.Item>This is a menu item</Menu.Item>
      </Menu>
    )
  }
}

这是我的package.json：

{
  "name": "app",
  "version": "2.0.10",
  "private": true,
  "dependencies": {
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.7.0",
    "@tinymce/tinymce-react": "^3.6.0",
    "agora-rtc-sdk-ng": "^4.x",
    "axios": "^0.19.2",
    "bad-words": "^3.0.3",
    "emoji-picker-react": "^3.2.3",
    "env-cmd": "^10.1.0",
    "file-saver": "^2.0.2",
    "firebase": "^9.0.1",
    "html-to-react": "^1.4.3",
    "joi": "^17.4.2",
    "lodash": "^4.17.15",
    "logrocket": "^1.0.14",
    "luxon": "^2.0.2",
    "nosleep.js": "^0.12.0",
    "react": "^16.13.1",
    "react-add-to-calendar": "^0.1.5",
    "react-app-polyfill": "^1.0.6",
    "react-countdown": "^2.2.1",
    "react-datepicker": "^2.16.0",
    "react-device-detect": "^2.0.1",
    "react-dom": "^16.13.1",
    "react-dropzone": "^11.0.1",
    "react-easy-crop": "^3.3.0",
    "react-emoji-render": "^1.2.4",
    "react-google-charts": "^3.0.15",
    "react-google-login": "^5.2.2",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-input-mask": "^2.0.4",
    "react-intl": "^5.20.7",
    "react-multi-carousel": "^2.8.0",
    "react-number-format": "^4.4.1",
    "react-password-strength-bar": "^0.3.2",
    "react-paypal-button-v2": "^2.6.2",
    "react-phone-input-2": "^2.13.8",
    "react-player": "^2.10.0",
    "react-router-dom": "^6.1.1",
    "react-scripts": "^3.4.1",
    "react-scroll": "^1.7.16",
    "react-sortable-hoc": "^1.11.0",
    "react-text-transition": "^1.3.0",
    "react-textarea-autosize": "^8.0.1",
    "react-to-print": "^2.9.0",
    "react-toastify": "^6.0.8",
    "screenfull": "^5.0.2",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3",
    "styled-components": "^5.1.1",
    "xlsx": "^0.16.1"
  },
  "scripts": {
    "start": "REACT_APP_STAGE=development react-scripts start",
    "start:ssl": "HTTPS=true yarn start",
    "demo": "REACT_APP_STAGE=demo react-scripts start",
    "build": "rm -rf build && react-scripts build"        
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/luxon": "^2.0.3",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "@types/react-easy-crop": "^2.0.0",
    "@types/styled-components": "^5.1.14",
    "@welldone-software/why-did-you-render": "^6.2.0",
    "cypress": "^5.6.0",
    "husky": "^4.3.0",
    "prettier": "^2.1.2",
    "pretty-quick": "^3.1.0",
    "semantic-ui-less": "^2.4.1",
    "source-map-explorer": "^2.5.2",
    "typescript": "^4.4.2"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

Answer 1

我认为这不是语义UI本身的错误，而是@types/react包的问题。

随着React 18的发布，@types/react包发生了破坏性的更改，这可能会影响使用使用@types/react作为对等依赖项的包的项目，这些依赖关系如下所示。

"@types/react": "*",

建议的解决办法如下。

1. 安装国家预防机制-武力-决议包并添加一个preinstall脚本。(纱线/pnpm可能不需要) “预装”："npx国家预防机制-强制-决议“
2. 在resolutions中添加一个package.json部分，并坚持为您的项目工作的版本。 “决议”：{“@类型/反应”："17.0.30“}

有关更多上下文，请阅读原版。