[Discussion] Upgrade `node` and `npm` to latest LTS versions

## 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: https://github.com/WordPress/wordpress-develop/pull/4028.

## Context

Currently, Gutenberg allows the following versions:
- [`node` 14+ (`>=14.0.0`)](https://github.com/WordPress/gutenberg/blob/09eeb8c66870425997aa159348609a4b3c4148c8/package.json#L18)
- [`npm` 6 (`>=6.9.0 <7`)](https://github.com/WordPress/gutenberg/blob/09eeb8c66870425997aa159348609a4b3c4148c8/package.json#L19)

The problem is that the [recommended `node` version](https://github.com/WordPress/gutenberg/blob/257a2e8134701c030e5b44d486c29ee67fe56428/.nvmrc#L1) is in [maintenance and the End-of-life is April, 30th, 2023](https://github.com/nodejs/release#release-schedule), 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

<sub> **NOTE:** [End-of-life of `node` 18 is 2025-04-30](https://github.com/nodejs/release#release-schedule).</sub>

## 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 ✅ 

<details><summary>Error logs</summary>

```
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
```

</details>

- 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 https://github.com/WordPress/gutenberg/pull/47388, so we can either downgrade the dependency `@testing-library/react-native` to a previous version ([`10.1.1`](https://github.com/callstack/react-native-testing-library/releases/tag/v10.1.1)) or wait to the PR to be merged~~.

**UPDATE: ✅ This issue has been solved with https://github.com/WordPress/gutenberg/pull/47388.**

#### 2. `react-native` dependency ❌ 

<details><summary>Error logs</summary>

```
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, ...)
```

</details>

- 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 ⚠️ 

<details><summary>Warning logs</summary>

```
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
```

</details>

**🔧 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
- https://github.com/WordPress/gutenberg/issues/34801
- https://github.com/WordPress/gutenberg/pull/46400
- https://github.com/WordPress/gutenberg/issues/46443
- https://github.com/WordPress/gutenberg/issues/46652
- https://github.com/WordPress/gutenberg/issues/48009
- https://github.com/WordPress/gutenberg/pull/40517
- https://github.com/WordPress/gutenberg/pull/47712

<sub>**NOTE:** Please feel free to edit the above with issues/PRs related to this topic.</sub>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Intro

Context

Goal

Blockers

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

2. `react-native` dependency ❌

3. Other warnings related to peer dependencies ⚠️

Related opened issues/PRs

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Intro

Context

Goal

Blockers

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

2. react-native dependency ❌

3. Other warnings related to peer dependencies ⚠️

Related opened issues/PRs

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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

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

2. `react-native` dependency ❌