Проблема компиляции с React, Typescript и Material-UI 4

Внезапно вся моя сборка рухнула и не собирается. Я сбросил проект несколько дней назад со свежей сборкой приложения create-реагировать, и некоторое время все было в порядке, а затем вчера - аналогичная проблема с другой ошибкой:

Failed to compile.

TS2322: Type '{ children: Element; xsDown: true; }' is not assignable to type 'IntrinsicAttributes & HiddenProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & HiddenProps'.
    208 |                     {studentName(x)} <{x.student}>
    209 |                 </Box>
  > 210 |                 {!locked && <Hidden xsDown={true}><Box><RemoveButton deleteClickHandler={deleteClickHandler} x={x}/></Box></Hidden>}
        |                              ^^^^^^
    211 |                 {locked &&
    212 |                 <Box>
    213 |                     <Tooltip title="Locked"><Lock/></Tooltip>


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Я уже удалил некоторые библиотеки, которые я использовал в небольшом месте, которые, как я подозревал, вызывали конфликтующие объявления типов, но я все еще сталкиваюсь с этой проблемой, и на данный момент я полностью застрял.

Package.json не очень сложен:

  "name": "****Redacted****",
  "version": "1.2.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@fortawesome/fontawesome-common-types": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "@material-table/core": "^4.3.39",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.3",
    "@sentry/react": "^6.19.6",
    "@sentry/tracing": "^6.19.6",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.26.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/dateformat": "^5.0.0",
    "@types/jest": "^27.0.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-router-dom": "^5.3.3",
    "amazon-cognito-identity-js": "^5.2.8",
    "amazon-cognito-identity-js-typescript": "^1.22.0",
    "axios": "^0.26.1",
    "dateformat": "^4.6.3",
    "immutability-helper": "^3.1.1",
    "react": "^18.0.0",
    "react-dnd": "^14.0.5",
    "react-dnd-html5-backend": "14.1.0",
    "react-dnd-touch-backend": "14.1.0",
    "react-dom": "^18.0.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "sass": "^1.49.11",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

что такое Hidden, если его компонент также любезно показывает код.

Abbas Hussain 09.04.2022 19:44
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
1
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я полагаю, это потому, что вы обновились до React 18 (в частности, "@types/react": "^18.0.0",).

Этот пул реквест говорит о том, что изменилось.

Поскольку проблема связана с компонентом Material Ui 4, вам, скорее всего, потребуется выполнить одно из следующих действий:

  1. обновить до Муи5
  2. перейти на React 17
  3. подождите, пока этот пиар будет объединен, это, похоже, устранит проблему, которая у вас есть.

(Кроме того, <Hidden/> от детей MUI4 реализует с children?: React.ReactNode;, как упоминается в первой ссылке)

Это странно, потому что в моей версии Material-ui 4.12.4 этого нет. Я постараюсь понизить версию, чтобы реагировать на 17 здесь, может быть, это поможет. Я думал, что пробовал это, но... может быть, не совсем правильно

PlexQ 09.04.2022 21:41

Теперь я получаю другую ошибку, сообщающую мне, что <Box> нельзя использовать в качестве компонента JSX:/.

PlexQ 09.04.2022 21:53

Другие вопросы по теме