Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Packages: Issues with peer dependencies with npm7+ after React 18 upgrade #48009

Open
gziolo opened this issue Feb 13, 2023 · 13 comments
Open

Packages: Issues with peer dependencies with npm7+ after React 18 upgrade #48009

gziolo opened this issue Feb 13, 2023 · 13 comments
Labels
npm Packages Related to npm packages [Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Comments

@gziolo
Copy link
Member

gziolo commented Feb 13, 2023

Description

Part of Upgrade node and npm to latest LTS versions.

See related PR in WordPress core: WordPress/wordpress-develop#4028. CI jobs fail because of the peer dependencies related to React 18 upgrade:

npm WARN ERESOLVE overriding peer dependency
[7](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:8)
npm WARN While resolving: [email protected]
[8](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:9)
npm WARN Found: [email protected]
[9](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:10)
npm WARN node_modules/react
[10](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:11)
npm WARN   react@"18.2.0" from the root project
[11](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:12)
npm WARN   46 more (@emotion/react, @emotion/styled, ...)
[12](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:13)
npm WARN 
[13](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:14)
npm WARN Could not resolve dependency:
[14](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:15)
npm WARN peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
[15](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:16)
npm WARN node_modules/react-autosize-textarea
[16](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:17)
npm WARN   react-autosize-textarea@"^7.1.0" from @wordpress/[email protected]
[17](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:18)
npm WARN   node_modules/@wordpress/block-editor
[18](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:19)
npm WARN   2 more (@wordpress/edit-site, @wordpress/editor)
[19](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:20)
npm WARN 
[20](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:21)
npm WARN Conflicting peer dependency: [email protected]
[21](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:22)
npm WARN node_modules/react
[22](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:23)
npm WARN   peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
[23](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:24)
npm WARN   node_modules/react-autosize-textarea
[24](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:25)
npm WARN     react-autosize-textarea@"^7.1.0" from @wordpress/[email protected]
[25](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:26)
npm WARN     node_modules/@wordpress/block-editor
[26](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:27)
npm WARN     2 more (@wordpress/edit-site, @wordpress/editor)
[27](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:28)
npm WARN ERESOLVE overriding peer dependency
[28](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:29)
npm WARN While resolving: [email protected]
[29](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:30)
npm WARN Found: [email protected]
[30](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:31)
npm WARN node_modules/react-dom
[31](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:32)
npm WARN   react-dom@"18.2.0" from the root project
[32](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:33)
npm WARN   26 more (@floating-ui/react-dom, @react-spring/web, ...)
[33](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:34)
npm WARN 
[34](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:35)
npm WARN Could not resolve dependency:
[35](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:36)
npm WARN peer react-dom@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
[36](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:37)
npm WARN node_modules/react-autosize-textarea
[37](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:38)
npm WARN   react-autosize-textarea@"^7.1.0" from @wordpress/[email protected]
[38](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:39)
npm WARN   node_modules/@wordpress/block-editor
[39](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:40)
npm WARN   2 more (@wordpress/edit-site, @wordpress/editor)
[40](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:41)
npm WARN 
[41](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:42)
npm WARN Conflicting peer dependency: [email protected]
[42](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:43)
npm WARN node_modules/react-dom
[43](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:44)
npm WARN   peer react-dom@"^0.14.0 || ^15.0.0 || ^16.0.0" from [email protected]
[44](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:45)
npm WARN   node_modules/react-autosize-textarea
[45](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:46)
npm WARN     react-autosize-textarea@"^7.1.0" from @wordpress/[email protected]
[46](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:47)
npm WARN     node_modules/@wordpress/block-editor
[47](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:48)
npm WARN     2 more (@wordpress/edit-site, @wordpress/editor)
[48](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:49)
npm WARN ERESOLVE overriding peer dependency
[49](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:50)
npm WARN While resolving: [email protected]
[150](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:151)
npm WARN   26 more (@floating-ui/react-dom, @react-spring/web, ...)
[151](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:152)
npm WARN 
[152](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:153)
npm WARN Could not resolve dependency:
[153](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:154)
npm WARN peer react-dom@"^16.8.0 || ^17.0.0" from [email protected]
[154](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:155)
npm WARN node_modules/reakit-utils
[155](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:156)
npm WARN   reakit-utils@"^0.15.2" from [email protected]
[156](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:157)
npm WARN   node_modules/reakit
[157](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:158)
npm WARN   2 more (reakit-system, reakit-warning)
[158](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:159)
npm WARN 
[159](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:160)
npm WARN Conflicting peer dependency: [email protected]
[160](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:161)
npm WARN node_modules/react-dom
[161](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:162)
npm WARN   peer react-dom@"^16.8.0 || ^17.0.0" from [email protected]
[162](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:163)
npm WARN   node_modules/reakit-utils
[163](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:164)
npm WARN     reakit-utils@"^0.15.2" from [email protected]
[164](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:165)
npm WARN     node_modules/reakit
[165](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:166)
npm WARN     2 more (reakit-system, reakit-warning)
[166](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:167)
npm WARN ERESOLVE overriding peer dependency
[167](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:168)
npm WARN While resolving: [email protected]
[168](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:169)
npm WARN Found: [email protected]
[169](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:170)
npm WARN node_modules/react
[170](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:171)
npm WARN   react@"18.2.0" from the root project
[171](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:172)
npm WARN   46 more (@emotion/react, @emotion/styled, ...)
[172](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:173)
npm WARN 
[173](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:174)
npm WARN Could not resolve dependency:
[174](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:175)
npm WARN peer react@"^16.8.0 || ^17.0.0" from [email protected]
[175](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:176)
npm WARN node_modules/reakit-warning
[176](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:177)
npm WARN   reakit-warning@"^0.6.2" from [email protected]
[177](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:178)
npm WARN   node_modules/reakit
[178](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:179)
npm WARN 
[179](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:180)
npm WARN Conflicting peer dependency: [email protected]
[180](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:181)
npm WARN node_modules/react
[181](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:182)
npm WARN   peer react@"^16.8.0 || ^17.0.0" from [email protected]
[182](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:183)
npm WARN   node_modules/reakit-warning
[183](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:184)
npm WARN     reakit-warning@"^0.6.2" from [email protected]
[184](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:185)
npm WARN     node_modules/reakit
[185](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:186)
npm ERR! code EBADENGINE
[186](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:187)
npm ERR! engine Unsupported engine
[187](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:188)
npm ERR! engine Not compatible with your version of node/npm: [email protected]
[188](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:189)
npm ERR! notsup Not compatible with your version of node/npm: [email protected]
[189](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:190)
npm ERR! notsup Required: {"node":">=18.10.0","npm":">=9.0.0"}
[190](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:191)
npm ERR! notsup Actual:   {"npm":"8.19.3","node":"v18.13.0"}

Step-by-step reproduction instructions

  1. Install Node 18.14.0 that comes with npm 9.3.1
    2.1. Try installing dependencies with Upgrade NodeJS to 16.x wordpress-develop#4028 branch.
    or
    2.2 Try installing one of the npm packages like @wordpress/edit-post:
npm install @wordpress/[email protected]

Screenshots, screen recording, code snippet

Screenshot 2023-02-13 at 10 08 33

Environment info

  • WordPress packages installed with latest or wp-6.2 dist-tag
  • Node 18.14.0
  • npm 9.3.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@gziolo gziolo added [Type] Bug An existing feature does not function as intended npm Packages Related to npm packages labels Feb 13, 2023
@noahtallen
Copy link
Member

React autosize text area has been causing issues since the React 17 upgrade as well -- the maintainer hasn't been active in the repo, so no one can update its peer dependencies: https://github.com/buildo/react-autosize-textarea

When I was working on the React 17 upgrade a year ago, there were a handful of other packages in a similar situation.

I think there are two solutions to these types of issues:

  1. Replace the package(s) (probably ideal if it is completely unmaintained now)
  2. Use the "overrides" (or similar) feature to force npm to accept the peer dependency violation (https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides), after testing the package works with react 18. This has been unavoidable for other projects I've worked on

@tyxla
Copy link
Member

tyxla commented Feb 15, 2023

Replace the package(s) (probably ideal if it is completely unmaintained now)

Seems like there was a release 3 months ago, meaning it's not unmaintained. That adds a third option: work with the maintainers to provide support for React 18.

@noahtallen
Copy link
Member

Seems like there was a release 3 months ago

We might be talking about different packages -- react-autosize-textarea was last updated 3 years ago! https://www.npmjs.com/package/react-autosize-textarea?activeTab=versions

I definitely agree with you for packages that are still maintained, though. I think the big challenge is that it's easy to make a PR that changes the peer dependency line in package.json, and maybe also easy to test that it does actually work. But harder to get a response and then a new release. :( When packages are actively maintained, they're much less likely to get in this scenario since so many people will ask the maintainer to support the new React version.

@tyxla
Copy link
Member

tyxla commented Feb 17, 2023

Yes, I must have been looking at this one:

https://www.npmjs.com/package/react-textarea-autosize

Which seems to support React 18 at a first glance. Perhaps it makes sense to try using this one?

@Supportic
Copy link

Supportic commented Mar 20, 2023

@wordpress/components is also using reakit "^1.3.8" which still depends on react 17.0.0. They rebranded their repo to ariakit, basically v2 which is using react and react-dom 18. I currently cannot tell how stable it is but I also get upgrade warnings of peerDependencies when installing react latest.

warning "@wordpress/components > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
warning "@wordpress/components > [email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "@wordpress/components > reakit > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
warning "@wordpress/components > reakit > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
warning "@wordpress/components > reakit > [email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".
warning "@wordpress/components > reakit > [email protected]" has incorrect peer dependency "react@^16.8.0 || ^17.0.0".
warning "@wordpress/components > reakit > [email protected]" has incorrect peer dependency "react-dom@^16.8.0 || ^17.0.0".

@tyxla
Copy link
Member

tyxla commented Mar 21, 2023

AFAIK there have been some PRs exploring upgrade paths to ariakit (#36216, #41726, #48440) but I'm not sure what's the progress and priority there, cc @ciampo and @mirka

@ciampo
Copy link
Contributor

ciampo commented Mar 21, 2023

We are exploring using ariakit for "new implementation" of components, but we haven't looked into replacing existing usages of reakit with ariakit. We should also keep in mind that ariakit technically is not stable yet (it's marked as still in alpha).

Hopefully the APIs didn't change much, which would allow for a smooth refactor.

Maybe that's something that @diegohaz can help with, or at least advise on?

@gziolo
Copy link
Member Author

gziolo commented Aug 11, 2023

It's still an issue.

@gziolo gziolo added the [Package] Components /packages/components label Aug 11, 2023
@mirka
Copy link
Member

mirka commented Aug 11, 2023

Remaining Reakit usages tracked here: #53278

@t-hamano
Copy link
Contributor

Regarding the react-autosize-textarea package, which is one of the causes, I came up with the idea that instead of replacing it with react-textarea-autosize, which supports React 18, we could use an element that uses the contentEditable attribute.

This attribute is already used in the RichText component, where the height automatically grows and shrinks depending on the content. It also won't be affected by the React version or the state of the React app.

This is a sample of Codepen, which simulates a code editor: https://codepen.io/Tetsuaki-Hamno/pen/abPGzgX

There may be issues to be resolved in terms of HTML symbol sanitization, line breaks, and accessibility, but I would like to find time to try it out.

@ciampo
Copy link
Contributor

ciampo commented Feb 5, 2024

Update: with #58631 merged, reakit has been completely removed from the repository

@louisgcom
Copy link

Update: react-autosize-textarea repository has been archived by the owner on Mar 1, 2024.

@tyxla
Copy link
Member

tyxla commented Aug 2, 2024

I've experimented with removing react-autosize-textarea in favor of our built-in TextareaControl with field-sizing in #64208.

It's a bummer that it's blocked by field-sizing's browser support, but hopefully, this will change soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
npm Packages Related to npm packages [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

8 participants