Dependency conflicts - halstack-react 9+ / React 18 / NPM 9

[fredofm]

Describe the bug
When installing a project that includes "@dxc-technology/halstack-react": "^9.1.0" and "react": "^18.2.0" as dependencies, you get several conflicts due to @radix-ui/react-popover@0.1.6.

npm WARN While resolving: @radix-ui/react-popover@0.1.6
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.8 || ^17.0" from @radix-ui/react-portal@0.1.4
npm WARN   node_modules/@diaas/assure-platform-react-tools/node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-portal
npm WARN     @radix-ui/react-portal@"0.1.4" from @radix-ui/react-popover@0.1.6
npm WARN     node_modules/@diaas/assure-platform-react-tools/node_modules/@radix-ui/react-popover
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.8 || ^17.0" from @radix-ui/react-popover@0.1.6
npm WARN node_modules/@dxc-technology/halstack-react/node_modules/@radix-ui/react-popover
npm WARN   @radix-ui/react-popover@"0.1.6" from @dxc-technology/halstack-react@9.1.0
npm WARN   node_modules/@dxc-technology/halstack-react
npm WARN 
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.8 || ^17.0" from @radix-ui/react-popover@0.1.6
npm WARN   node_modules/@dxc-technology/halstack-react/node_modules/@radix-ui/react-popover
npm WARN     @radix-ui/react-popover@"0.1.6" from @dxc-technology/halstack-react@9.1.0

It seems that react-popover@0.1.6 is pinned in Halstack-react

Taking a look at that popover version, it seems that it's not React 18 compatible:

"peerDependencies": {
    "react": "^16.8 || ^17.0",
    "react-dom": "^16.8 || ^17.0"
  },

And Halstack-react requires React 18:

"peerDependencies": {
    "react": "^18.x",
    "react-dom": "^18.x",
    "styled-components": "^5.0.1"
  },

To Reproduce

1. create new npm application. (npm init)
2. Add de following dependencies

"dependencies": {
    "@dxc-technology/halstack-react": "^9.1.0",
    "react": "^18.2.0"
  }

4. install (npm install)

Expected behaviour
No conflicts when using halstack-react >=9 and react 18.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Taking a look at the possible solutions:

1. Force npm to resolve a different version in package.json:

"overrides": {
    "@radix-ui/react-popover": "0.1.7-rc.47"
  },

There is no final 0.1.7 release, so I tried with the last candidate version available. I tested it with CSAM Release Service UI and CSAM Environment Service UI with no issues during test executions or manual tests (at least for now... 😄).

2. Use "--legacy-peer-deps"

It's my second option, because this parameter will affect to the whole amount of dependencies and I want to use that functionality from npm 7+.

Add labels
Add any applicable label like the concerned components or the target version of the Design System where the bug has been found.

[jsuarezgonz]

Hi @fredofm,

First of all, thanks for the feedback, and sorry for the late response. We will study the problem and try to solve it in the coming sprints.