reactjs - svi elementi semantic-ui-react imaju pogrešku "ne mogu se koristiti kao JSX komponenta"

Imam React aplikaciju u Typescriptu koja koristi semantic-ui-react, ali se više ne može kompajlirati zbog toga što svi SUR elementi imaju grešku "ne može se koristiti kao JSX komponenta." Ova je aplikacija u upotrebi oko 2 godine, a danas je počela prikazivati ovu grešku pri kompajliranju.

Stvari koje sam pokušao:

Uklonite yarn lock i node_modules te ponovno instalirajte ovisnosti
Snižavanje/podizanje verzije react, react-dom, react-scripts i njihovih @types
Smanjivanje/povećavanje verzije paketa semantic-ui-react
Preuzeo posljednju poznatu ispravno funkcionirajuću datoteku package.json iz repozitorija i ponovo instalirao ovisnosti

Koristim yarn mono-repo postavku gdje je ovo jedna od aplikacija.

Svaka pomoć je cijenjena!

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

Primjer koda:

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

Evo mog 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"
    }
  }
}

Odgovor #1

Mislim da ovo nije pogreška u samom Semantic UI Reactu, već problem s paketom @types/react.

S izlaskom React 18, paket @types/react ima prekidne promjene, što bi moglo utjecati na projekte koji koriste pakete koji koriste @types/react kao peer-dependency deklariranu na sljedeći način.

"@types/react": "*",

Predloženo rješenje za ovo je sljedeće.

Instalirajte paket npm-force-resolutions i dodajte preinstall skriptu. (Vjerojatno nije potrebno za yarn/pnpm)
```
"preinstall": "npx npm-force-resolutions"
```
Dodajte odjeljak resolutions u package.json i navedite verziju koja radi za vaš projekt.
```
"resolutions": {
    "@types/react": "17.0.30"
}
```

Za više konteksta pročitajte izvorni problem.