несоответствие версий реакта

BigBird15 commented 7 months ago

привет!

я столкнулась с проблемой при использовании компонент из @nlmk/ds-2.0 (в частности, при использовании select; она возникает и с другими компонентами) при попытке их рендеринга на странице возникает ошибка invalid hook call

я пришла к выводу, что проблема в несоответствии версий реакта: мой проект использует 18.2.0 в пакете же есть 2 зависимости, использующие реакт версии 17.0.2 - это react-popper@2.2.5 и react-transition-group@4.4.5

чтобы убедиться, что дело именно в этом, я создала новый пустой проект на реакте и попробовала рендерить компоненты там произошло то же самое - invalid hook call я сделала даунгрейд версии реакта в этом проекте до 17 - и проблема исчезла, селект отобразился, все работает

я очень не хотела бы снижать версию реакта в основном проекте

если я ни в чем не ошибаюсь, то обновление этих двух зависимостей в пакете должно решить проблему у react-popper вышла версия 2.3.0, она работает с 18 реактом

ниже прилагаю результаты вызова npm ls react

+-- @fortawesome/react-fontawesome@0.2.0
| `-- react@18.2.0 deduped
+-- @nlmk/ds-2.0@1.2.2
| +-- react-input-mask@2.0.4
| | `-- react@18.2.0 deduped
| +-- react-popper@2.2.5
| | `-- react@17.0.2
| `-- react-transition-group@4.4.5
|   `-- react@17.0.2 deduped
+-- @reduxjs/toolkit@2.0.1
| `-- react@18.2.0 deduped
+-- antd@5.13.2
| +-- @ant-design/cssinjs@1.18.2
| | `-- react@18.2.0 deduped
| +-- @ant-design/icons@5.2.6
| | `-- react@18.2.0 deduped
| +-- @ant-design/react-slick@1.0.2
| | `-- react@18.2.0 deduped
| +-- @rc-component/color-picker@1.5.1
| | `-- react@18.2.0 deduped
| +-- @rc-component/mutate-observer@1.1.0
| | `-- react@18.2.0 deduped
| +-- @rc-component/tour@1.12.2
| | +-- @rc-component/portal@1.1.2
| | | `-- react@18.2.0 deduped
| | `-- react@18.2.0 deduped
| +-- @rc-component/trigger@1.18.2
| | `-- react@18.2.0 deduped
| +-- qrcode.react@3.1.0
| | `-- react@18.2.0 deduped
| +-- rc-cascader@3.21.0
| | `-- react@18.2.0 deduped
| +-- rc-checkbox@3.1.0
| | `-- react@18.2.0 deduped
| +-- rc-collapse@3.7.2
| | `-- react@18.2.0 deduped
| +-- rc-dialog@9.3.4
| | `-- react@18.2.0 deduped
| +-- rc-drawer@7.0.0
| | `-- react@18.2.0 deduped
| +-- rc-dropdown@4.1.0
| | `-- react@18.2.0 deduped
| +-- rc-field-form@1.41.0
| | `-- react@18.2.0 deduped
| +-- rc-image@7.5.1
| | `-- react@18.2.0 deduped
| +-- rc-input-number@8.6.1
| | `-- react@18.2.0 deduped
| +-- rc-input@1.4.3
| | `-- react@18.2.0 deduped
| +-- rc-mentions@2.10.1
| | `-- react@18.2.0 deduped
| +-- rc-menu@9.12.4
| | +-- rc-overflow@1.3.2
| | | `-- react@18.2.0 deduped
| | `-- react@18.2.0 deduped
| +-- rc-motion@2.9.0
| | `-- react@18.2.0 deduped
| +-- rc-notification@5.3.0
| | `-- react@18.2.0 deduped
| +-- rc-pagination@4.0.4
| | `-- react@18.2.0 deduped
| +-- rc-picker@3.14.6
| | `-- react@18.2.0 deduped
| +-- rc-progress@3.5.1
| | `-- react@18.2.0 deduped
| +-- rc-rate@2.12.0
| | `-- react@18.2.0 deduped
| +-- rc-resize-observer@1.4.0
| | `-- react@18.2.0 deduped
| +-- rc-segmented@2.2.2
| | `-- react@18.2.0 deduped
| +-- rc-select@14.11.0
| | +-- rc-virtual-list@3.11.3
| | | `-- react@18.2.0 deduped
| | `-- react@18.2.0 deduped
| +-- rc-slider@10.5.0
| | `-- react@18.2.0 deduped
| +-- rc-steps@6.0.1
| | `-- react@18.2.0 deduped
| +-- rc-switch@4.1.0
| | `-- react@18.2.0 deduped
| +-- rc-table@7.37.0
| | +-- @rc-component/context@1.4.0
| | | `-- react@18.2.0 deduped
| | `-- react@18.2.0 deduped
| +-- rc-tabs@14.0.0
| | `-- react@18.2.0 deduped
| +-- rc-textarea@1.6.3
| | `-- react@18.2.0 deduped
| +-- rc-tooltip@6.1.3
| | `-- react@18.2.0 deduped
| +-- rc-tree-select@5.17.0
| | `-- react@18.2.0 deduped
| +-- rc-tree@5.8.2
| | `-- react@18.2.0 deduped
| +-- rc-upload@4.5.2
| | `-- react@18.2.0 deduped
| +-- rc-util@5.38.1
| | `-- react@18.2.0 deduped
| `-- react@18.2.0 deduped
+-- react-dom@18.2.0
| `-- react@18.2.0 deduped
+-- react-redux@9.1.0
| +-- react@18.2.0 deduped
| `-- use-sync-external-store@1.2.0
|   `-- react@18.2.0 deduped
+-- react-router-dom@6.20.1
| +-- react-router@6.20.1
| | `-- react@18.2.0 deduped
| `-- react@18.2.0 deduped
`-- react@18.2.0

BigBird15 commented 7 months ago

в качестве быстрого решения без необходимости откатываться на 17 реакт мне помогло следующее:

в package.json переписать версиюreact-popper@2.2.5 на более новую:

"overrides": {
    "react-popper@2.2.5": "2.3.0"
  }

затем запустить npm install --legacy-peer-deps, чтобы перевести на 18 реакт react-transition-group@4.4.5

после этого у меня исчезли 17 версии, все заработало но конечно это костыль, хотелось бы более надежное решение найти

nlmk-group commented 6 months ago

Добрый день!

Обновили NPM пакеты в версии v1.3.0 на последние. Спасибо за issue 😊.

nlmk-group / ds-2.0

несоответствие версий реакта #1