Skip to content

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

Open
Open
Packages: Issues with peer dependencies with npm7+ after React 18 upgrade#48009
Labels
[Package] Components/packages/components[Type] BugAn existing feature does not function as intendednpm PackagesRelated to npm packages
@gziolo

Description

@gziolo
gziolo
opened on 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: react-autosize-textarea@7.1.0
[8](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:9)
npm WARN Found: react@18.2.0
[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 react-autosize-textarea@7.1.0
[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/block-editor@11.3.2
[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: react@16.14.0
[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 react-autosize-textarea@7.1.0
[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/block-editor@11.3.2
[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: react-autosize-textarea@7.1.0
[29](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:30)
npm WARN Found: react-dom@18.2.0
[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 react-autosize-textarea@7.1.0
[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/block-editor@11.3.2
[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: react-dom@16.14.0
[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 react-autosize-textarea@7.1.0
[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/block-editor@11.3.2
[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: reakit@1.3.11
[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 reakit-utils@0.15.2
[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 reakit@1.3.11
[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: react-dom@17.0.2
[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 reakit-utils@0.15.2
[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 reakit@1.3.11
[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: reakit-warning@0.6.2
[168](https://github.com/WordPress/wordpress-develop/actions/runs/4126632491/jobs/7128815363#step:5:169)
npm WARN Found: react@18.2.0
[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 reakit-warning@0.6.2
[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 reakit@1.3.11
[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: react@17.0.2
[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 reakit-warning@0.6.2
[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 reakit@1.3.11
[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: WordPress@6.2.0
[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: WordPress@6.2.0
[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/edit-post@7.3.2

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Package] Components/packages/components[Type] BugAn existing feature does not function as intendednpm PackagesRelated to npm packages

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions