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

Upgrade NodeJS to 16.x #4028

Closed
wants to merge 10 commits into from
Closed

Conversation

desrosj
Copy link
Contributor

@desrosj desrosj commented Feb 7, 2023

This updates the version of NodeJS used for WordPress Core to 16.x.

18.x is not currently an option because of system level adjustments that need to be made in order for the build server and other .org infrastructure to properly support 18.x. See this post for more context.

Trac ticket: https://core.trac.wordpress.org/ticket/56658


This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

@desrosj desrosj self-assigned this Feb 7, 2023
@gziolo
Copy link
Member

gziolo commented Feb 10, 2023

I see that 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"}

I will report back to the Gutenberg repository.


I wonder whether it would help if we roll back all changes to the lock file and then run npm install --legacy-peer-deps again to see if that temporarily fixes the reports about peer dependencies. It is also possible to configure it with npm config (.npmrc) as explained in https://docs.npmjs.com/cli/v7/using-npm/config#legacy-peer-deps and in npm/rfcs#283 (comment).

Interestingly enough, when I read about this npm flag, I quickly saw the following note (source: https://stackoverflow.com/posts/66620869/revisions):

Due to the large number of modules that haven't specifically added React v17 (or more recently, React 18) as a peerDependency, it's now commonplace to encounter the unable to resolve dependency tree error when running npm installs within a v17 React application.

This error will fire whenever a module (or any of its own dependencies) lists a previous major version of React as a peerDependency without specifically including React v17 as well.

(Note: Similar behavior will occur with the major-version update of any other framework or library.)

@gziolo
Copy link
Member

gziolo commented Feb 13, 2023

Issue filed in Gutenberg: WordPress/gutenberg#48009.

@gziolo
Copy link
Member

gziolo commented Mar 1, 2023

We now have a source-of-truth for upgrading Node and npm to the latest LTS in the Gutenberg repository: WordPress/gutenberg#48588.

@desrosj
Copy link
Contributor Author

desrosj commented Apr 17, 2023

Just linking this context. Appears we'll need to only target 16.x for the time being due to a systems limitation: https://make.wordpress.org/systems/2023/02/09/upgrade-nodejs-npm-on-the-build-server/.

@kevin940726
Copy link
Member

Hi, @desrosj! Curious about the status of this PR. Is there anything blocking us from moving this forward? Node 14 is now EOL, and we're preparing to merge WordPress/gutenberg#48950 with this so that there's less disruption.

@desrosj desrosj changed the title Upgrade NodeJS to 18.x Upgrade NodeJS to 16.x May 11, 2023
@desrosj
Copy link
Contributor Author

desrosj commented May 11, 2023

@kevin940726 👋🏼 I've updated the PR to reflect the fact that we need to target 16 instead of 18.

There are some build process failures, though. We need to figure out what's going on there.

Are there any changes in WordPress/gutenberg#48950 that need to be committed to WordPress itself along with these changes?

We also should publish a post communicating the plan to contributors. I can start drafting that!

@swissspidy
Copy link
Member

WordPress/gutenberg#53426 was just merged in Gutenberg to bump to Node 16 🎉

So let's make it happen 🚀

@gziolo
Copy link
Member

gziolo commented Aug 9, 2023

It's very likely that we will have to use the following config line here as well:

https://github.com/WordPress/gutenberg/blob/4a24e8560cb5c277ea90631ad81e3453933bc27e/.npmrc#L3

legacy-peer-deps = true

# Conflicts:
#	package-lock.json
#	src/wp-includes/assets/script-loader-packages.min.php
@desrosj desrosj requested a review from swissspidy August 9, 2023 13:32
@desrosj
Copy link
Contributor Author

desrosj commented Aug 9, 2023

Flagged for review from a few folks that showed interest in this.

I've gone and merged in the latest trunk, and also added legacy-peer-deps.

One thing I'd like to confirm before merging this is why there are changes in the src/wp-includes folder as a result. My hunch is that there is an update to uuid being applied that is the reason.

@swissspidy
Copy link
Member

One thing I'd like to confirm before merging this is why there are changes in the src/wp-includes folder as a result. My hunch is that there is an update to uuid being applied that is the reason.

Just picked wordcount.js to look at, because it has a changed hash as well. I ran npm run build:dev on trunk and then on this PR. All the diffs were just because functions were replaced with arrow functions:

Screenshot 2023-08-09 at 16 23 03

(left is trunk, right is this PR)

@youknowriad
Copy link
Contributor

I'm guessing that the update of the package-lock.json also updated some packages and among these packages is probably browser-list which includes the browser usage which probably changed slightly making arrow functions a syntax that is supported in all the supported browsers so it's not transpiled anymore.

I think that's fine.

@gziolo
Copy link
Member

gziolo commented Aug 9, 2023

@swissspidy, what if you run npx browserslist@latest --update-db in both places? Beside, it's very likely that we see a different set of dependencies in both branches, including webpack. I also think that Node 16 is using a different hashing algorithm by default so it would also impact the versions calculated for packages. I remember some fixes in Gutenberg for Node 17 and above like WordPress/gutenberg#36471.

@gziolo
Copy link
Member

gziolo commented Aug 9, 2023

It would be great to fix the following:

Screenshot 2023-08-09 at 18 38 14

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did a quick check for the post editor and the site editor, and it seems to work as before after:

rm -rf node_modules
nvm use
npm i
npm run build:dev
npm run env:start

Resolving some of the vulnerabilities reported in this commit or with a follow-up would be great.

@desrosj
Copy link
Contributor Author

desrosj commented Aug 9, 2023

Resolving some of the vulnerabilities reported in this commit or with a follow-up would be great.

Agreed! I plan to do a follow-up commit that upgrades all other dependencies to their latest versions that were not specifically required to make this upgrade work.

Thanks everyone! I'll get this committed shortly.

@desrosj
Copy link
Contributor Author

desrosj commented Aug 9, 2023

Merged in Core-56378. Post also published. Thanks all!

@desrosj desrosj closed this Aug 9, 2023
@noahtallen noahtallen mentioned this pull request Oct 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
5 participants