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:

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.

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 react/create-react-app#11860. The warnings are:

DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE
DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE