webpacker-dev-serverでClass constructor ServeCommand cannot be invoked without ‘new’のエラーが出た時の対処法

こんにちは、わくほこ(@wakuhoko)です。

今回もプログラミング学習時に遭遇したエラーの備忘録です。

プログラミングの勉強を再開してからエラーネタには困らないなあ（白目）

webpacker-dev-serverを導入したときに出たエラーです。

結論、webpacker-dev-serverのバージョンをダウングレードして解決しました。

webpacker-dev-server導入時に遭遇したエラー

webpacker-dev-serverを導入しようとターミナルで以下のコマンドを実行。

bin/webpack-dev-server

そしたら、「コマンドが別のパッケージに移動したんだけど、インストールする？」的なことを聞かれます。

yesを入力。

Would you like to install serve? (That will run yarn add -D @webpack-cli/serve) (yes/NO) : yes

エラー。なんっでやねん。

TypeError: Class constructor ServeCommand cannot be invoked without 'new'

お決まりの「言われた通りにやったのに動きません！！」ですね。

どうやらバージョンが変わったのが原因でうまくいかないっぽいので解決策を検索してみます。

バージョンをダウングレードすれば良いみたいなので、ファイルのpackage.jsonを変更します。

{
  "name": "blogapp_atech",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/actiontext": "^6.0.6",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "4.3.0",
    "jquery": "^3.6.3",
    "trix": "^1.2.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^2.0.1",
    "webpack-dev-server": "~3" //←ここを変更！
  }
}

わたしの場合、最初はwebpack-dev-serverの箇所が”^4.11.1″になっていました。

ちなみにこの「^」はキャレットというらしいです。

一番左端のバージョンは固定して、それ以外のバージョンで新しいものがあれば更新するのだそう。

上記のファイルを変更したら、ターミナルでyarn installを実行。

yarn install

これで再度以下のコマンドを実行したら今度はうまく行きました！

バンザイ🙌

bin/webpack-dev-server

webpack周りについての備忘録

そもそもwebpackって何ぞやってことで簡単に概要を残しておきます。

終わりに

こういったバージョンによるエラーは検索すると解決策が出てくるので、助かります…！

エラーの原因についてはバグっぽいのであまり深く考えないことにします。

さて、先に進むぞ！

ではでは〜

あわせて読みたい

後悔しないプログラミングスクール選びを元講師が紹介！ プログラミングを学習する上でスクール選びは重要です。しかし、様々なスクールがあり、自分に合ったスクール選びをしなければ学習効率が下がります。後悔しないスクール選びをする方法を元プログラミングスクール講師がご紹介します。