Как избавиться от ошибки 'DatePicker' cannot be used as a JSX component в Ant Design?

После некоторых обновлений зависимостей, столкнулся с проблемой типизации компонентов, в частности DatePicker от Ant Design.

import { DatePicker, ConfigProvider } from "antd";
import locale from "antd/lib/locale/ru_RU";

<ConfigProvider locale={locale}>
    <DatePicker
      onBlur={handleBlur}
      onChange={handleChange}
      placeholder="Выберите дату"
      format="DD.MM.YYYY"
      status={status}
    />
</ConfigProvider>

"DatePicker" невозможно использовать как компонент JSX.
Тип экземпляра "Component<PickerProps<Moment> & { status?: "" | "error" | "warning" | undefined; }, unknown, any> & CommonPickerMethods" не является допустимым элементом JSX.
Типы, возвращаемые "render()", несовместимы между этими типами.
  Тип "React.ReactNode" не может быть назначен для типа "import("/home/user/Projects/my-frontend/node_modules/@types/react-redux/node_modules/@types/react/index").ReactNode".
    Тип "{}" не может быть назначен для типа "ReactNode".ts(2786)

Что я пробовал?

  1. Гуглил
  2. Удалял node_modules
  3. Удалял yarn.lock
  4. yarn cache clean
  5. Делал даунгрейд зависимостей
  6. Открывал проект на другом устройстве
  7. Менял версию TypeScript 4.6.3 <-> 4.7.0

Текущий package.json выглядит следующим образом:

package.json

Ошибка как висела, так и продолжает висеть. Прошу помощи сообщества. Возможно кто-то сталкивался?


Ответы (1 шт):

Автор решения: Konstantin Chuykov

Нашел решение проблемы - https://stackoverflow.com/a/71843120/8769345

Так как многие React библиотеки используют зависимость @types/react : "*", подгружаются типы для недавно вышедшей 18 версии, от туда и проблемы.

Временным решением было бы добавить resolution в package.json:

"resolutions": {
    "@types/react": "17.0.39",
    "@types/react-dom": "17.0.11"
}

Который был ограничивал версии этих пакетов для зависимостей их зависимостей. Не забудьте удалить node_modules и *.lock файлы и заново загрузить все зависимости.

Гуд лак!

→ Ссылка