reactjs - לכל האלמנטים של semantic-ui-react יש שגיאה "לא ניתן להשתמש בהם כרכיב JSX"

יש לי אפליקציית React ב-Typescript שמשתמשת ב-semantic-ui-react אך היא כבר לא מתקומפלת בגלל שכל רכיבי ה-SUR מציגים את השגיאה "cannot be used as a JSX component." אפליקציה זו נמצאת בשימוש כבר כשנתיים, והיום היא התחילה להציג שגיאת קומפילציה זו.

דברים שניסיתי:

הסר את yarn lock ואת node_modules והתקן מחדש את התלויות
הורדה/שדרוג של react, react-dom, react-scripts וה-@types שלהם
הורדה/שדרוג של חבילת semantic-ui-react
משכתי את קובץ package.json האחרון שעבד טוב מהמאגר והתקנתי מחדש את התלויות

אני משתמש בהגדרת Mono-repo של Yarn שבה זה אחד מהאפליקציות.

כל עזרה תזכה להערכה!

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

תשובה #1

אני חושב שזה לא שגיאה של Semantic UI React עצמו אלא בעיה עם חבילת @types/react.

עם השחרור של React 18, לחבילת @types/react יש שינויים שמפרים תאימות, שעשויים להשפיע על הפרויקטים שצורכים חבילות שמשתמשות ב-@types/react כתלות-חבר המוצהרת בדרך הבאה.

"@types/react": "*",

התיקון המוצע לכך הוא כדלקמן.

התקן את חבילת npm-force-resolutions והוסף סקריפט preinstall. (כנראה לא נדרש עבור yarn/pnpm)
```
"preinstall": "npx npm-force-resolutions"
```
הוסף סעיף resolutions בקובץ package.json והדבק את הגרסה שעובדת עבור הפרויקט שלך.
```
"resolutions": {
    "@types/react": "17.0.30"
}
```

לקונטקסט נוסף, קרא את הבעיה המקורית.