Peer dependency warnings when using @elyra/canvas with React 17

[s100]

Ref: 3605

@elyra/canvas now supports React 17 in addition to React 16 and React 18, thank you: #1559.

I now see peer dependency warnings when installing @elyra/canvas with React 17.

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-codemirror2@7.2.1
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"^17.0.2" from the root project
npm WARN   138 more (@apaas/common-header, @carbon/charts-react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@">=15.5 <=16.x" from react-codemirror2@7.2.1
npm WARN node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-codemirror2
npm WARN   react-codemirror2@"^7.2.1" from @elyra/canvas@12.34.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@">=15.5 <=16.x" from react-codemirror2@7.2.1
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-codemirror2
npm WARN     react-codemirror2@"^7.2.1" from @elyra/canvas@12.34.0
npm WARN     node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-contextmenu@2.14.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"^17.0.2" from the root project
npm WARN   138 more (@apaas/common-header, @carbon/charts-react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.1" from react-contextmenu@2.14.0
npm WARN node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-contextmenu
npm WARN   react-contextmenu@"^2.14.0" from @elyra/canvas@12.34.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^0.14.0 || ^15.0.0 || ^16.0.1" from react-contextmenu@2.14.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-contextmenu
npm WARN     react-contextmenu@"^2.14.0" from @elyra/canvas@12.34.0
npm WARN     node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-contextmenu@2.14.0
npm WARN Found: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"^17.0.2" from the root project
npm WARN   80 more (@apaas/common-header, @carbon/charts-react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.0 || ^15.0.0 || ^16.0.1" from react-contextmenu@2.14.0
npm WARN node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-contextmenu
npm WARN   react-contextmenu@"^2.14.0" from @elyra/canvas@12.34.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN 
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^0.14.0 || ^15.0.0 || ^16.0.1" from react-contextmenu@2.14.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-contextmenu
npm WARN     react-contextmenu@"^2.14.0" from @elyra/canvas@12.34.0
npm WARN     node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-resize-detector@5.2.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   dev react@"^17.0.2" from the root project
npm WARN   138 more (@apaas/common-header, @carbon/charts-react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.0.0" from react-resize-detector@5.2.0
npm WARN node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-resize-detector
npm WARN   react-resize-detector@"^5.2.0" from @elyra/canvas@12.34.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN 
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN   peer react@"^16.0.0" from react-resize-detector@5.2.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-resize-detector
npm WARN     react-resize-detector@"^5.2.0" from @elyra/canvas@12.34.0
npm WARN0m     node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-resize-detector@5.2.0
npm WARN Found: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"^17.0.2" from the root project
npm WARN   80 more (@apaas/common-header, @carbon/charts-react, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^16.0.0" from react-resize-detector@5.2.0
npm WARN node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-resize-detector
npm WARN   react-resize-detector@"^5.2.0" from @elyra/canvas@12.34.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas
npm WARN 
npm WARN Conflicting peer dependency: react-dom@16.14.0
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^16.0.0" from react-resize-detector@5.2.0
npm WARN   node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas/node_modules/react-resize-detector
npm WARN     react-resize-detector@"^5.2.0" from @elyra/canvas@12.34.0
npm WARN     node_modules/@icp4i/cp4i-canvas/node_modules/@elyra/canvas

This is happening because @elyra/canvas has production dependencies on...

• react-codemirror2, which supports only React 16. There is an issue to add React 17 support but the package is clearly unmaintained, with no releases since June 2020.
• react-contextmenu, which supports only React 16, has had no releases since May 2020 and is explicitly no longer maintained. React 17/18 support isn't coming here.
• react-resize-detector@5.2.0, which supports only React 16. Unlike the other two, react-resize-detector is fully maintained and more recent versions support React 16, 17 and 18, so the solution here would simply be to upgrade. Releases are listed here and the breaking changes look fairly manageable.

[tomlyn]

@s100 FYI - we are currently working on this. It may take a few more days to get everything done.

[s100]

Pleased to hear it, looking forward to taking the new version for a spin when it appears. :)

[tomlyn]

The react-contextmenu module has been removed from Elyra Canvas and the react-resize-detector module has been upgraded. We are handling the code mirror problem in a separate issue. I will post here when that one is finished.

[tomlyn]

@s100 The two changes for react-contextmenu and react-resize-detector are included in Elyra Canvas v12.37.0. Unfortunately the person working on the Code Mirror changes will be away for a couple of weeks to so this won't get completed until then.

[s100]

Confirmed, I see that react-contextmenu is no longer a dependency of @elyra/canvas@12.37.0, and you've upgraded to react-resize-detector@9 which allows React 17.

In the meantime, I also observe that since I opened this issue, react-codemirror2@7.3.0 has been published, which adds support for React 17. This was unexpected as the project had been dormant for over three years, but quite welcome.

As a result of this, I no longer see any peer dependency warnings when installing @elyra/canvas alongside React 17. Thank you!