Error: Cannot find module 'webpack-cli/bin/config-yargs'の対処法

Qiitaの以下の記事を参考にTypeScriptの環境構築を行なっていた際に、タイトルのエラーが発生し、躓きましたので、解決方法を記載しておきます。

TypeScriptチュートリアル① -環境構築編-: Qiita

エラーの内容

❯ npm start                                                                         

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

エラーの原因

webpack-cliのバージョン4系には、config-yargsが含まれていないのが、エラーとなっていた原因のようです。

エラーの解消方法

npm installでモジュールをインストールする際に、バージョンを指定せず最新版をインストールしていました。

実行したコマンド

npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev

作成されたpackage.json

{
...略...
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.6.0",
    "webpack-cli": "^4.2.0",   # このバージョンにconfig-yargsが含まれいないからエラーになる
    "webpack-dev-server": "^3.11.0"
  }
}

package.jsonのwebpack-cliを、バージョン3系の最新版を指定するように更新します。

{
...略...
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "typescript": "^4.1.2",
    "webpack": "^5.6.0",
    "webpack-cli": "^3.3.12",   # バージョン3系の最新を指定する
    "webpack-dev-server": "^3.11.0"
  }
}

webpack-cliを再インストールします。

npm install webpack-cli --save-dev

これで、Error: Cannot find module 'webpack-cli/bin/config-yargs'のエラーは解消されるはずです。