webpack examples fail locally on Node.js 18 (LTS)

[MikeMcC399]

Problem description

The webpack examples report success (with a deprecation warning) when run on GitHub.

When they are run locally on Node.js 18, which is currently the Node.js active Long Term Support (LTS) version, they fail.

The associated action and source files are:

• example-webpack.yml
• examples/v9/webpack
• examples/webpack

An example of the deprecation warning resulting from running on GitHub can be found in run 6303278763.

Steps to reproduce

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

cd examples/webpack
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	Compiled successfully.
v16.18.1	DeprecationWarning [DEP0111] Compiled successfully.
v18.12.1	Error: error:0308010C:digital envelope routines::unsupported

Expectation

• There should be no deprecation warning displayed when example-webpack is run on GitHub.
• npm start should always succeed when it is executed in either of the directories examples/v9/webpack or examples/webpack 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 causes only a deprecation warning.

If a local test is being carried out on Node.js 18, this fails because the examples are using webpack v4, whereas a minimum version of webpack v5.61.0 is needed to support Node.js >= 17 .

github-action/examples/v9/webpack/package.json

Lines 13 to 15 in 326daf6

	"webpack": "4",
	"webpack-cli": "3",
	"webpack-dev-server": "3.11.0"

github-action/examples/webpack/package.json

Lines 13 to 15 in d1d2ac8

	"webpack": "4",
	"webpack-cli": "3",
	"webpack-dev-server": "3.11.0"

Suggested fix

For

• examples/v9/webpack
• examples/webpack

in webpack.config.js

• replace deprecated contentBase by static directory
• add mode development and

bump

• webpack from 4 to 5.75.0 (latest)
• webpack-cli from 3 to 5.0.1 (latest)
• webpack-dev-server from 3.11.0 to 4.11.1 (latest)

then add

• a .gitignore file containing dist/.

References

• webpack Configuration documentation
• webpack devServer documentation

[MikeMcC399]

I plan to submit a PR to resolve this issue and I will wait until there are no other conflicting PRs which would also modify the affected package-lock.json files.

[MikeMcC399]

• PR Update example webpack to run under Node.js 18 #708 submitted to resolve this issue.