How can I use heroui and react-aria-components in the same project?

[Farley-Chen]

My project use both heroui and react-aria-components.

It seems that heroui depend on @react-aria/button 3.11.0 and react-aria-components depend on @react-aria/button 3.11.1

Here is a issue about different version of dependencies here

So I got PressResponder.mjs:33 A PressResponder was rendered without a pressable child.

How can I solve it?

I'm newly in frontend, and I try override in npm like

    "react-aria-components": {
      "react-aria": "3.36.0"
    },

But it not work.

[snowystinger]

Looks like react-aria-components depends on react-aria@^3.37.0
https://www.unpkg.com/browse/[email protected]/package.json
and react-aria depends on @react-aria/button@^3.11.1
https://www.unpkg.com/browse/[email protected]/package.json

So I'm not sure how you're seeing that

react-aria-components depend on @react-aria/button 3.11.0

It appears as though heroui doesn't allow range dependencies, which will make it easy to accidentally install duplicates https://github.com/heroui-inc/heroui/blob/canary/packages/components/button/package.json

You'll need to manually resolve them to a single version or use a tool like yarn dedupe (I don't know the npm options off the top of my head). Using overrides is the manual way of doing it, and the docs for the syntax are here https://docs.npmjs.com/cli/v11/configuring-npm/package-json#overrides see the first example

To make sure the package foo is always installed as version 1.0.0 no matter what version your dependencies rely on:

[Farley-Chen]

Thanks for reply.

@snowystinger

react-aria-components depend on @react-aria/button 3.11.0

I type the wrong version, It is

heroui depend on @react-aria/button 3.11.0 and react-aria-components depend on @react-aria/button 3.11.1

I do not know how dedupe worked, but when I try npm dedupe, seems no working.

I read the doc of override again, and try like

"overides": {
      "react-aria": "3.36.0"
},

It can override some of the duplication

But because of here are too many duplication, it is hard to solve it.

Here is the output when I run the script in above issue.

-----------------------
| PACKAGE.LOCK REPORT |
-----------------------
@internationalized/date (2)      - 3.6.0, 3.7.0
@react-aria/breadcrumbs (2)      - 3.5.19, 3.5.20
@react-aria/button (2)           - 3.11.0, 3.11.1
@react-aria/calendar (2)         - 3.6.0, 3.7.0
@react-aria/checkbox (2)         - 3.15.0, 3.15.1
@react-aria/combobox (2)         - 3.11.0, 3.11.1
@react-aria/datepicker (2)       - 3.12.0, 3.13.0
@react-aria/dialog (2)           - 3.5.20, 3.5.21
@react-aria/focus (2)            - 3.19.0, 3.19.1
@react-aria/form (2)             - 3.0.11, 3.0.12
@react-aria/i18n (2)             - 3.12.4, 3.12.5
@react-aria/interactions (2)     - 3.22.5, 3.23.0
@react-aria/label (2)            - 3.7.13, 3.7.14
@react-aria/link (2)             - 3.7.7, 3.7.8
@react-aria/listbox (2)          - 3.13.6, 3.14.0
@react-aria/menu (2)             - 3.16.0, 3.17.0
@react-aria/overlays (2)         - 3.24.0, 3.25.0
@react-aria/progress (2)         - 3.4.18, 3.4.19
@react-aria/radio (2)            - 3.10.10, 3.10.11
@react-aria/selection (2)        - 3.21.0, 3.22.0
@react-aria/slider (2)           - 3.7.14, 3.7.15
@react-aria/switch (2)           - 3.6.10, 3.6.11
@react-aria/table (2)            - 3.16.0, 3.16.1
@react-aria/tabs (2)             - 3.9.8, 3.9.9
@react-aria/textfield (2)        - 3.15.0, 3.16.0
@react-aria/toolbar (2)          - 3.0.0-beta.11, 3.0.0-beta.12
@react-aria/tooltip (2)          - 3.7.10, 3.7.11
@react-aria/utils (2)            - 3.26.0, 3.27.0
@react-aria/visually-hidden (2)  - 3.8.18, 3.8.19
@react-stately/calendar (2)      - 3.6.0, 3.7.0
@react-stately/checkbox (2)      - 3.6.10, 3.6.11
@react-stately/collections (2)   - 3.12.0, 3.12.1
@react-stately/combobox (2)      - 3.10.1, 3.10.2
@react-stately/datepicker (2)    - 3.11.0, 3.12.0
@react-stately/form (2)          - 3.1.0, 3.1.1
@react-stately/list (2)          - 3.11.1, 3.11.2
@react-stately/menu (2)          - 3.9.0, 3.9.1
@react-stately/overlays (2)      - 3.6.12, 3.6.13
@react-stately/radio (2)         - 3.10.10, 3.10.9
@react-stately/slider (2)        - 3.6.0, 3.6.1
@react-stately/table (2)         - 3.13.0, 3.13.1
@react-stately/tabs (2)          - 3.7.0, 3.7.1
@react-stately/toggle (2)        - 3.8.0, 3.8.1
@react-stately/tooltip (2)       - 3.5.0, 3.5.1
@react-stately/tree (2)          - 3.8.6, 3.8.7
@react-stately/virtualizer (2)   - 4.2.0, 4.2.1
@react-types/breadcrumbs (2)     - 3.7.10, 3.7.9
@react-types/button (2)          - 3.10.1, 3.10.2
@react-types/calendar (2)        - 3.5.0, 3.6.0
@react-types/checkbox (2)        - 3.9.0, 3.9.1
@react-types/combobox (2)        - 3.13.1, 3.13.2
@react-types/datepicker (2)      - 3.10.0, 3.9.0
@react-types/form (2)            - 3.7.8, 3.7.9
@react-types/grid (2)            - 3.2.10, 3.2.11
@react-types/link (2)            - 3.5.10, 3.5.9
@react-types/menu (2)            - 3.9.13, 3.9.14
@react-types/overlays (2)        - 3.8.11, 3.8.12
@react-types/progress (2)        - 3.5.8, 3.5.9
@react-types/radio (2)           - 3.8.5, 3.8.6
@react-types/select (2)          - 3.9.8, 3.9.9
@react-types/shared (2)          - 3.26.0, 3.27.0
@react-types/table (2)           - 3.10.3, 3.10.4
@react-types/tabs (2)            - 3.3.11, 3.3.12
@react-types/textfield (2)       - 3.10.0, 3.11.0
@react-types/tooltip (2)         - 3.4.13, 3.4.14

[snowystinger]

yeah, heroui is doing you no favors for this, you should log an issue with them to accept a range

otherwise, you need to determine what to resolve each of those versions to in your overrides

[Farley-Chen]

Ok, I will try to log an issue with them.