react-scripts used in example-wait-on fail locally on Node.js 18 (LTS)

[MikeMcC399]

The react-scripts which are used in the workflow example-wait-on fail if they are used locally with npm start and the environment has Node.js 18 installed.

Problem description

When react-scripts examples are run locally on Node.js 18, which is currently the Node.js active Long Term Support (LTS) version, they fail with the message:

"Error: error:0308010C:digital envelope routines::unsupported".

The associated action and source files are:

• example-wait-on.yml
• examples/v9/react-scripts
• examples/react-scripts

Steps to reproduce

Open a terminal window on a local clone of the repository:

cd examples/react-scripts
nvm use 18.12.1
npm ci
npm start

Note:
"Error: error:0308010C:digital envelope routines::unsupported"

Results for supported Node.js versions

Executing npm start gives:

Node.js	for v9 and v10 examples
v14.21.1	No error
v16.18.1	No error
v18.12.1	Error: error:0308010C:digital envelope routines::unsupported

Expectation

npm start should succeed when it is executed in either of the directories examples/v9/react-scripts or examples/react-scripts and a supported Node.js version is installed (currently 14.x and 16.x have maintenance status; 18.x is the active LTS version).

Analysis

cypress-io/github-action/ currently always runs under Node.js 16.13.0 (see #642). Running under this version shows no error. This explains why the action does not currently fail when running on GitHub.

The examples use react-scripts 3.4.4 which pulls in webpack@4.42.0 indirectly. This is not sufficient to support running under Node.js 18, since a minimum version of webpack v5.61.0 is needed to support Node.js >= 17.

github-action/examples/v9/react-scripts/package.json

Lines 13 to 15 in 326daf6

	"react": "16.14.0",
	"react-dom": "16.14.0",
	"react-scripts": "3.4.4"

github-action/examples/react-scripts/package.json

Lines 13 to 15 in d1d2ac8

	"react": "16.14.0",
	"react-dom": "16.14.0",
	"react-scripts": "3.4.4"

create-react-app - v5.0.0, which hosts the package react-scripts, is the first version which supports webpack v5.

Suggested fix

For

• examples/v9/react-scripts
• examples/react-scripts

bump

• react to 18.2.0 (latest)
• react-dom to 18.2.0 (latest)
• react-scripts from 3.4.4 to 5.0.1 (latest)

Note that when running npm start, deprecation warnings appear. This is a known issue facebook/create-react-app#11860. The warnings are:

DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE
DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE

[MikeMcC399]

I plan to submit a PR also for this issue and will wait until there are no other conflicting open PRs targeting the same package-lock.json files.

[MikeMcC399]

• PR Update examples react-scripts for Node.js 18 #731 is submitted to resolve this issue