Part 7d - webpack-dev-server not working with webpack v5

[jpparkkari]

There's some complications with webpack-dev-server and webpack v5 (which is btw not updated anymore, since 2018).
I got the dev server running by using webpack serve.
"start": "webpack serve --mode development"

I could do a pull request but that would require more or less rewriting the whole webpack-dev-server chapter, and I'm not sure if webpack-dev-server can just be replaced with webpack serve, and if webpack.config.js is still valid. I also don't know how this works with webpack v4.

Here's the error I got from npm start (macOS Catalina)
`> webpack-dev-server --mode=development

internal/modules/cjs/loader.js:985
throw err;
^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:

• /part7-webpack/node_modules/webpack-dev-server/bin/webpack-dev-server.js
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
  at Function.Module._load (internal/modules/cjs/loader.js:864:27)
  at Module.require (internal/modules/cjs/loader.js:1044:19)
  at require (internal/modules/cjs/helpers.js:77:18)
  at Object. (/part7-webpack/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
  at Module._compile (internal/modules/cjs/loader.js:1158:30)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
  at Module.load (internal/modules/cjs/loader.js:1002:32)
  at Function.Module._load (internal/modules/cjs/loader.js:901:14)
  at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/part7-webpack/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
  }
  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! webpack-osa7@0.0.1 start: webpack-dev-server --mode=development
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the webpack-osa7@0.0.1 start script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

[Kaltsoon]

Could you try this: webpack/webpack-dev-server#2239 (comment) ? If this issue is fixed soon, perhaps there's no need to change the material. At least the webpack's docs still encourage using webpack-dev-server: https://webpack.js.org/guides/development/#using-webpack-dev-server

[jpparkkari]

It seems the problem actually is webpack-cli v4. v3.3.8 works.

[Kaltsoon]

Ended up with the webpack serve --mode development as the start script as you suggested. Thanks for the help!

[Alicelijia]

It seems the problem actually is webpack-cli v4. v3.3.8 works.
{
"webpack": "^5.4.0",
"webpack-cli": "^4.0.0 ",
"webpack-dev-server": "^3.11.0"
}
Error: Cannot find module 'webpack-cli/bin/config-yargs'
if i change webpack-cli version to ^3.3.8 it works