chore(deps): Introduce webpack-dev-server v5

[DatGreekChick]

Motivation

When running npm outdated I saw webpack-dev-server was on the list. However, when I attempted to update it to latest, I got an error:

DatGreekChick : ~/repo (main)
🤓  npm outdated
Package             Current  Wanted  Latest  Location                         Depended by
webpack-dev-server   4.15.1  4.15.1   5.0.2  node_modules/webpack-dev-server  repo
DatGreekChick : ~/repo (main)
💀  npm i webpack-dev-server@5.0.2
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: XXXXXXXX@2.0.0
npm WARN Found: webpack-dev-server@4.15.1
npm WARN node_modules/webpack-dev-server
npm WARN   peerOptional webpack-dev-server@"3.x || 4.x" from @pmmmwh/react-refresh-webpack-plugin@0.5.11
npm WARN   node_modules/@pmmmwh/react-refresh-webpack-plugin
npm WARN     dev @pmmmwh/react-refresh-webpack-plugin@"^0.5.11" from the root project
npm WARN   1 more (the root project)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peerOptional webpack-dev-server@"3.x || 4.x" from @pmmmwh/react-refresh-webpack-plugin@0.5.11
npm WARN node_modules/@pmmmwh/react-refresh-webpack-plugin
npm WARN   dev @pmmmwh/react-refresh-webpack-plugin@"^0.5.11" from the root project

added 17 packages, removed 1 package, changed 9 packages, and audited 1709 packages in 7s

226 packages are looking for funding
  run `npm fund` for details

10 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Thus, this commit makes a first attempt at introducing webpack-dev-server v5.

What's Changed

• Updates node version to 18.12 in enum within .circleci/config.yml
• Creates a webpack-dev-server alias for v4
  • Within package.json
  • In a new file test/helpers/sandbox/alias4WebpackDevServer.js
  • Included in test/helpers/sandbox/configs.js
• Installs webpack-dev-server@5 and includes this new version in peerDependencies
• Modifies this.global.WDS_VERSION (this is certainly wrong at the moment) in test/jest-environment.js
• Updates types, but that likely needs to be ripped away or modified in a different commit

Tests

I ran yarn run test:exec and yarn test, but I'm seeing local failures connecting to the port among other issues. I suspect because the entire update isn't complete this is why there are failures as the test suite passed fully on main.

Notes

I attempted to follow previous commits for updating webpack-dev-server, but we can consider this commit a WIP until everything passes. I see there was an attempt from @jipis in #801, but I wonder if the default values need WDS@4, so I left much of that intact. I'm happy to work on this with Jonathan and you, Michael @pmmmwh!

Also, there's no CONTRIBUTING.md file, which might be helpful in understanding how to correctly set up this repository and make changes to it! I'm happy to help with this as well 🤝

RESOLVES #800

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[DatGreekChick]

We probably want to rethink this name if we keep v3, v4, and v5

[DatGreekChick]

@pmmmwh bump! 😄

[nyngwang]

I just realized that webpack-dev-server is now in v5 after reading this PR ... and now I'm in the same boat since I accidentally also updated it.

[Tommuh]

Having the same problem.

[DatGreekChick]

I don't recommend doing this for commercial projects, but if you run

npm install -D webpack-dev-server@5 --force

this package might still continue to work. It worked fine on my website, but that's a rather small site (and not one I get paid to develop 😅) so don't take undue risk where unnecessary! (though it should be fine as a dev dependency regardless!)

cc: @nyngwang @Tommuh

[Tommuh]

@DatGreekChick

Thank you - I tried and it works but not all.
It has some weird side effects in my project. I eventually reverted.

[captainamerican]

Put this in your package.json while your wait:

"overrides": {
	"@pmmmwh/react-refresh-webpack-plugin": {
		"webpack-dev-server": "^5.0.2"
	},
},

[nyngwang]

@captainamerican Thank you so much! This saves me from using --force for the following days of waiting.

[lfarkas]

is there any chance that this will be merged in the near future? or what is the plan to support webpack-5? and when?
we also has the same problem and would like to know to overrides or wait for the proper solution?

[DatGreekChick]

is there any chance that this will be merged in the near future? or what is the plan to support webpack-5? and when? we also has the same problem and would like to know to overrides or wait for the proper solution?

I haven't heard from the author at all, so until then I'd use the overrides.

[michaelfaith]

Thanks for this

[Airkro]

CI fail block this PR:

yarn install v1.22.18
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
error webpack-dev-server@5.0.2: The engine "node" is incompatible with this module. Expected version ">= 18.12.0". Got "16.17.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

[pmmmwh]

Hey - thanks for the PR and sorry for my silence. Since this change will bump the required Node.js version, we'll likely have to release a new version; I'll get to that this week.

On a high level - I think this is also probably the time to drop WDS v3 support. It was last published on 8 May 2020 (roughly 4 years ago); removing that would also allow us to drop some of the legacy code we needed to support that. Maybe even v4 as well - I think we'd be ok on compatibility if there's a v0.5.x release that supports all 3 versions.

[pmmmwh]

Fixed by #837 - will track work towards 0.6.x elsewhere.