reactjs - všetky prvky semantic-ui-react majú chybu „nemôžu byť použité ako JSX komponent“

Mám React aplikáciu v TypeScripte, ktorá používa semantic-ui-react, ale už sa nebude kompilovať kvôli všetkým elementom SUR, ktoré majú chybu „cannot be used as a JSX component.“ Táto aplikácia sa používa približne 2 roky a dnes začala vyhadzovať túto chybu pri kompilácii.

Veci, ktoré som vyskúšal:

Odstráňte yarn lock a node_modules a preinštalujte závislosti
Downgrade/Upgrade react, react-dom, react-scripts a ich @types
Zníženie/zvýšenie verzie balíka semantic-ui-react
Stiahol som posledný známy fungujúci súbor package.json z repozitára a preinštaloval závislosti

Používam nastavenie mono-repo yarn, kde je toto jedna z aplikácií.

Každá pomoc je oceniteľná!

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

Ukážkový kód:

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

Tu je môj súbor 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"
    }
  }
}

Odpoveď č. 1

Myslím si, že toto nie je chyba samotného Semantic UI React, ale skôr problém s balíkom @types/react.

S vydaním React 18 má balík @types/react zásadné zmeny, ktoré môžu ovplyvniť projekty, ktoré využívajú balíky používajúce @types/react ako peer-dependency deklarovaný nasledujúcim spôsobom.

"@types/react": "*",

Navrhované riešenie pre toto je nasledovné.

Nainštalujte balík npm-force-resolutions a pridajte skript preinstall. (Pravdepodobne nie je potrebné pre yarn/pnpm)
```
"preinstall": "npx npm-force-resolutions"
```
Pridajte sekciu resolutions do súboru package.json a nastavte verziu, ktorá funguje pre váš projekt.
```
"resolutions": {
    "@types/react": "17.0.30"
}
```

Pre viac kontextu si prečítajte pôvodný problém.