Skip to content

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

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.

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

    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