Как избавиться от ошибки '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)
Что я пробовал?
- Гуглил
- Удалял node_modules
- Удалял yarn.lock
- yarn cache clean
- Делал даунгрейд зависимостей
- Открывал проект на другом устройстве
- Менял версию TypeScript 4.6.3 <-> 4.7.0
Текущий package.json выглядит следующим образом:
Ошибка как висела, так и продолжает висеть. Прошу помощи сообщества. Возможно кто-то сталкивался?
Ответы (1 шт):
Нашел решение проблемы - 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 файлы и заново загрузить все зависимости.
Гуд лак!
