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

DatGreekChick commented 8 months ago

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[bot] commented 8 months ago

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

DatGreekChick commented 8 months ago

@pmmmwh bump! 😄

nyngwang commented 8 months ago

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 commented 8 months ago

Having the same problem.

DatGreekChick commented 8 months ago

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 commented 8 months ago

@DatGreekChick

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

captainamerican commented 8 months ago

Put this in your package.json while your wait:

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

nyngwang commented 8 months ago

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

lfarkas commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

Thanks for this

Airkro commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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

pmmmwh / react-refresh-webpack-plugin