webpack-dev-serverでサーバーが立ち上がらない

Question

webpack-dev-serverでエラーが出る

https://qiita.com/riversun/items/29d5264480dd06c7b9fb
上のページを元に、npm run startでwebpack-dev-serverを実行する部分まできたのですが、エラーが出てサーバーが立ち上がりません

発生している問題・エラーメッセージ

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

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/roxy3150/es6hello/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/roxy3150/es6hello/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/roxy3150/es6hello/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! es6hello@1.0.0 start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the es6hello@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/roxy3150/.npm/_logs/2020-10-25T06_57_54_957Z-debug.log

package.jsonのソースコード

{
  "name": "es6hello",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

試したこと

node_modulesとpackage-lock.jsonの削除,再インストールを試しましたが、解決しません。

補足情報（FW/ツールのバージョンなど）

npm 6.14.8
node v14.14.0

Answer 1

https://github.com/webpack/webpack-dev-server/issues/2029
によると、webpack-cliのバージョンの問題のようです。
"webpack-cli": "^4.1.0"のディレクトリをみてみましたが、確かに'webpack-cli/bin/config-yargs'は存在していませんでした。

参考にされている、qiitaの記事中の、

  "devDependencies": {
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  }

のバージョンに書き換えてから、npm installをすれば記事の内容を再現できると思います。

Comments

[shachidaikon]

指摘されたバージョンをpackage.jsonにて書き直して、インストールし直したところ正常にサーバーが立ち上がりました！本当にありがとうございます！