Skip to content

[Discussion] Upgrade node and npm to latest LTS versions #48588

New issue
New issue
Closed
Closed
[Discussion] Upgrade node and npm to latest LTS versions#48588
Labels
Developer ExperienceIdeas about improving block and theme developer experience[Status] In ProgressTracking issues with work in progress[Type] DiscussionFor issues that are high-level and not yet ready to implement.
@fluiddot

Description

@fluiddot
fluiddot
opened on Feb 28, 2023

Intro

The purpose of this issue is to serve as the source of truth for the topic related to upgrading the node and npm versions, as well as be the central point for discussing how to move it forward.

See also a related PR in WordPress core: WordPress/wordpress-develop#4028.

Context

Currently, Gutenberg allows the following versions:

The problem is that the recommended node version is in maintenance and the End-of-life is April, 30th, 2023, so it would be great to upgrade it. However, new node versions use npm versions above 6, which are currently blocked due to issues with dependencies (see below under the Blockers section).

Goal

Upgrade to the latest LTS version of node:

  • node 18.14.2
  • npm 9.5.0

Or alternatively, if we find blockers using npm 9, upgrade to the latest LTS version that supports npm 8:

  • node 18.13.0
  • npm 8.19.3

NOTE: End-of-life of node 18 is 2025-04-30.

Blockers

The main blockers at this point are related to dependencies/peer dependencies, in the following sections are described:

1. @testing-library/react-native dependency ✅

Error logs 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react-native@11.3.0
npm ERR! Found: jest@27.4.5
npm ERR! node_modules/jest
npm ERR!   dev jest@"27.4.5" from the root project
npm ERR!   peer jest@"^27.0.0" from jest-watch-typeahead@1.0.0
npm ERR!   node_modules/jest-watch-typeahead
npm ERR!     dev jest-watch-typeahead@"1.0.0" from the root project
npm ERR!   7 more (snapshot-diff, @wordpress/e2e-test-utils, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional jest@">=28.0.0" from @testing-library/react-native@11.3.0
npm ERR! node_modules/@testing-library/react-native
npm ERR!   dev @testing-library/react-native@"11.3.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: jest@29.4.0
npm ERR! node_modules/jest
npm ERR!   peerOptional jest@">=28.0.0" from @testing-library/react-native@11.3.0
npm ERR!   node_modules/@testing-library/react-native
npm ERR!     dev @testing-library/react-native@"11.3.0" from the root project
  • Requires jest@">=28.0.0"
  • Gutenberg is currently using jest@27.4.5

🔧 How to solve it: There's an ongoing effort to upgrade Jest version to 29 in #47388, so we can either downgrade the dependency @testing-library/react-native to a previous version (10.1.1) or wait to the PR to be merged.

UPDATE: ✅ This issue has been solved with #47388.

2. react-native dependency ❌

Error logs 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-native@0.69.4
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   dev react@"18.2.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/primitives-core@11.0.0
npm ERR!   node_modules/@emotion/primitives-core
npm ERR!     @emotion/primitives-core@"^11.0.0" from @emotion/native@11.0.0
npm ERR!     node_modules/@emotion/native
npm ERR!       dev @emotion/native@"11.0.0" from the root project
npm ERR!   83 more (@emotion/react, @emotion/styled, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"18.0.0" from react-native@0.69.4
npm ERR! node_modules/react-native
npm ERR!   dev react-native@"0.69.4" from the root project
npm ERR!   peer react-native@">=0.14.0 <1" from @emotion/native@11.0.0
npm ERR!   node_modules/@emotion/native
npm ERR!     dev @emotion/native@"11.0.0" from the root project
npm ERR!   19 more (@react-native-clipboard/clipboard, ...)
npm ERR!
npm ERR! Conflicting peer dependency: react@18.0.0
npm ERR! node_modules/react
npm ERR!   peer react@"18.0.0" from react-native@0.69.4
npm ERR!   node_modules/react-native
npm ERR!     dev react-native@"0.69.4" from the root project
npm ERR!     peer react-native@">=0.14.0 <1" from @emotion/native@11.0.0
npm ERR!     node_modules/@emotion/native
npm ERR!       dev @emotion/native@"11.0.0" from the root project
npm ERR!     19 more (@react-native-clipboard/clipboard, ...)
  • Requires react@"18.0.0"
  • Gutenberg is currently using react@18.2.0

🔧 How to solve it: The optimal approach for this would be to upgrade React Native to version 0.71.0. However, in the meantime, we could override the dependency as a workaround.

3. Other warnings related to peer dependencies ⚠️

Warning logs 
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mdx-js/react@1.6.22
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   dev react@"18.2.0" from the root project
npm WARN   86 more (@emotion/primitives-core, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN node_modules/@mdx-js/react
npm WARN   @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.7
npm WARN   node_modules/@storybook/addon-docs
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/react@1.6.22
npm WARN   node_modules/@mdx-js/react
npm WARN     @mdx-js/react@"^1.6.22" from @storybook/addon-docs@6.5.7
npm WARN     node_modules/@storybook/addon-docs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: ajv-keywords@3.4.1
npm WARN Found: ajv@8.7.1
npm WARN node_modules/ajv
npm WARN   dev ajv@"8.7.1" from the root project
npm WARN   4 more (ajv-draft-04, ajv-errors, ajv-formats, table)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer ajv@"^6.9.1" from ajv-keywords@3.4.1
npm WARN node_modules/ajv-keywords
npm WARN   ajv-keywords@"^3.4.1" from webpack@4.46.0
npm WARN   node_modules/@storybook/core-common/node_modules/webpack
npm WARN   4 more (webpack, webpack, schema-utils, schema-utils)
npm WARN
npm WARN Conflicting peer dependency: ajv@6.12.6
npm WARN node_modules/ajv
npm WARN   peer ajv@"^6.9.1" from ajv-keywords@3.4.1
npm WARN   node_modules/ajv-keywords
npm WARN     ajv-keywords@"^3.4.1" from webpack@4.46.0
npm WARN     node_modules/@storybook/core-common/node_modules/webpack
npm WARN     4 more (webpack, webpack, schema-utils, schema-utils)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   dev react@"18.2.0" from the root project
npm WARN   86 more (@emotion/primitives-core, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN   node_modules/@storybook/react
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN   node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-element-to-jsx-string@14.3.4
npm WARN Found: react-dom@18.2.0
npm WARN node_modules/react-dom
npm WARN   dev react-dom@"18.2.0" from the root project
npm WARN   52 more (@floating-ui/react-dom, @react-spring/web, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN   node_modules/@storybook/react
npm WARN
npm WARN Conflicting peer dependency: react-dom@17.0.2
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from react-element-to-jsx-string@14.3.4
npm WARN   node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/react@6.5.7
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-inspector@5.1.1
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   dev react@"18.2.0" from the root project
npm WARN   86 more (@emotion/primitives-core, @emotion/react, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN node_modules/react-inspector
npm WARN   react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.7
npm WARN   node_modules/@storybook/addon-actions
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN   node_modules/react-inspector
npm WARN     react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.7
npm WARN     node_modules/@storybook/addon-actions
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: webpack-filter-warnings-plugin@1.2.1
npm WARN Found: webpack@5.65.0
npm WARN node_modules/webpack
npm WARN   dev webpack@"5.65.0" from the root project
npm WARN   35 more (@pmmmwh/react-refresh-webpack-plugin, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from webpack-filter-warnings-plugin@1.2.1
npm WARN node_modules/webpack-filter-warnings-plugin
npm WARN   webpack-filter-warnings-plugin@"^1.2.1" from @storybook/builder-webpack4@6.5.7
npm WARN   node_modules/@storybook/builder-webpack4
npm WARN
npm WARN Conflicting peer dependency: webpack@4.46.0
npm WARN node_modules/webpack
npm WARN   peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from webpack-filter-warnings-plugin@1.2.1
npm WARN   node_modules/webpack-filter-warnings-plugin
npm WARN     webpack-filter-warnings-plugin@"^1.2.1" from @storybook/builder-webpack4@6.5.7
npm WARN     node_modules/@storybook/builder-webpack4

🔧 How to solve it: It's likely that these warnings won't block using npm 8 but it would be interesting to address them in the future, especially for using npm 9.

Affected dependencies:

  • @mdx-js/react
  • ajv-keywords
  • react-element-to-jsx-string
  • react-inspector
  • webpack-filter-warnings-plugin

Related opened issues/PRs

NOTE: Please feel free to edit the above with issues/PRs related to this topic.

Activity

fluiddot
added
[Type] DiscussionFor issues that are high-level and not yet ready to implement.
on Feb 28, 2023
fluiddot

fluiddot commented on Feb 28, 2023

@fluiddot
fluiddot
on Feb 28, 2023
ContributorAuthor

In relation to the React Native dependencies (@testing-library/react-native and react-native), I proposed a solution in this draft PR. The idea is to use the setting overrides and override these dependencies to the required versions:

gutenberg/package.json

Lines 246 to 253 in 9827fcb

"overrides": {
"react-native@0.69.4": {
"react": "18.2.0"
},
"@testing-library/react-native@11.3.0": {
"jest": "27.4.5"
}
},

NOTE: This solution is a temporary workaround until we upgrade the React Native and Jest versions.

tomdevisser

tomdevisser commented on Feb 28, 2023

@tomdevisser
tomdevisser
on Feb 28, 2023
Member

@fluiddot Thanks for this issue and the work you put in already, I think it's very important to address this. I have no experience with upgrading Node in a project like this, but will follow this to learn about it and think along where I can.

As there's not much time left before the end of April, is there a way we can give this a higher priority? Should it be added to a particular milestone?

And if we're not able to figure this out and merge it before the EOL, what are the risks of being late? Will things break, are there security implications or will it "just" not receive support anymore?

gziolo
added
Developer ExperienceIdeas about improving block and theme developer experience
on Feb 28, 2023
gziolo
mentioned this on Mar 1, 2023
gziolo

gziolo commented on Mar 1, 2023

@gziolo
gziolo
on Mar 1, 2023
Member

@fluiddot, thank you for opening this issue and collecting related efforts to synchronize work.

I updated the description and included a reference to a related PR in WordPress core: WordPress/wordpress-develop#4028.

After April 30th, once Gutenberg runs with NodeJS 18 and npm 9, we will need to follow up with upgrading the minimum required version to Node 16.0.0 and npm 7.10.0 that ships with it. @gvgvgvijayan made me realize that after opening #48368 last week. We will have to update engines field in package.json files, notes in README files, and list those changes in CHANGELOG files as a breaking to enforce a major version bump for updated packages. I found some prior art in #43141.

fluiddot

fluiddot commented on Mar 2, 2023

@fluiddot
fluiddot
on Mar 2, 2023
ContributorAuthor

I'm thinking about a potential plan in order to move the upgrade forward:

1. Fix the current dependency conflicts

Following the approach mentioned in this comment, we could fix the current dependency conflicts related to React native (@testing-library/react-native and react-native). This will allow starting using npm 7 or 8, although the package-lock.json file will be modified every time we install the dependencies.

ℹ️ I can work on this and have a PR ready today/tomorrow.

2. Decide the target version of node to upgrade to

We have two options:

  • Upgrade to node 18.14.2 / npm 9.5.0.
  • Upgrade to node 18.13.0 / npm 8.19.3.

If we go with the former, we'd need to fix other dependency conflicts that only happen when using npm 9. If we go with the latter, I think we could successfully migrate although we'd have the warnings mentioned in 3. Other warnings related to peer dependencies ⚠️ when installing the dependencies.

3. Upgrade node version

As @gziolo mentioned in this comment, we'd need to update engines field in package.json files, notes in README files, and list those changes in CHANGELOG files as a breaking to enforce a major version bump for updated packages. We could use #43141 as a guide to know what needs to be updated when creating a PR for this.

How does this plan sound to you? Please let me know if you have any thoughts/concerns. Thanks 🙇 !

gziolo

gziolo commented on Mar 2, 2023

@gziolo
gziolo
on Mar 2, 2023
Member

An excellent action plan, @fluiddot. I don't have strong opinions about npm version. We enforce the maximum version of Node and npm so increasing that to node 18.13.0 / npm 8.19.3 is still better than waiting more time. If that helps splitting that into two steps sounds reasonable.

desrosj

desrosj commented on Mar 2, 2023

@desrosj
desrosj
on Mar 2, 2023
Contributor

Thanks for working on this all! I haven't taken a deep dive into the challenges on the Gutenberg side yet, but I have on the Core side in Trac-56658 (the updates in both locations will need to be coordinated to happen relatively at the same time). For the related Core changes, see WordPress/wordpress-develop#4028.

It's my strong preference to upgrade to the latest Node and npm versions in one change instead of a two step process if possible. Each time we change the version requirements for these tools, we have to communicate it to contributors so that everyone can make any needed adjustments to their workflows. I know nvm makes this really easy, but in reality, not everyone has this installed and configured.

Another thing to keep in mind is that 7.x of npm upgrade the lock file format. When we update to npm >= 7.0.0, we should also update the engine at the same time. The lock file versions are forwards and backwards compatible, but contributors on 6.x will see the lock file convert back to the v1 format making it impossible for someone using npm 6.x to make any changes to the lock file.

kevin940726
mentioned this on Mar 9, 2023
gziolo

gziolo commented on Mar 10, 2023

@gziolo
gziolo
on Mar 10, 2023
Member

For visibility, @kevin940726 opened PR #48950 that upgrades Node to v18 and npm to v9. It contains more changes the discussed above, like:

  • npm workspaces
  • using npx instead of npm bin
  • the minimum version for Node is set to v18 for WordPress packages (v14 end of maintenance at the end of April, v16 - end of October)
fluiddot

fluiddot commented on Mar 10, 2023

@fluiddot
fluiddot
on Mar 10, 2023
ContributorAuthor

Now that #47388 is merged, I updated the PR's description to reflect that the issue with @testing-library/react-native dependency dependency is solved 🎊 .

fluiddot

fluiddot commented on Mar 10, 2023

@fluiddot
fluiddot
on Mar 10, 2023
ContributorAuthor

Regarding #48950 PR, I also opened a companion PR that aims to solve the issue with the React Native dependency: #48990.

donnapep
added a commit that references this issue on Mar 18, 2023

Update node and npm recommended versions to match Gutenberg

e406efa
johnhooks
mentioned this on Mar 20, 2023

25 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Developer ExperienceIdeas about improving block and theme developer experience[Status] In ProgressTracking issues with work in progress[Type] DiscussionFor issues that are high-level and not yet ready to implement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions
      [Discussion] Upgrade `node` and `npm` to latest LTS versions · Issue #48588 · WordPress/gutenberg