Laravelのnpm run devで「Module build failed: Error: You may be using an old version of webpack; please check you’re using at least version 4」と出る。

Laravelに組み込まれているlaravel-mixでAngularをビルドしようとした時に、以下のエラーが出ました。

> npm run dev
…
Module build failed: Error: You may be using an old version of webpack; please check you're using at least version 4

原因はlaravel-mixで使われているwebpackのバージョンが3と古くなっている事で、webpackと依存関係のあるts-loader の最新版がwebpack3をサポートしていないため。

ts-loaderのリポジトリに以下の記載があります。

webpack: 4.x+ (please use ts-loader 3.x if you need webpack 2 or 3 support)

GitHub - TypeStrong/ts-loader: TypeScript loader for webpack

TypeScript loader for webpack. Contribute to TypeStrong/ts-loader development by creating an account on GitHub.

github.com

対策としては、ts-loaderのバージョンを古い物を指定して使う事。

Laravelアプリのプロジェクトディレクトリのpackage.json で以下の指定を追加。

"dependencies": {
  "ts-loader": "^3.5.0",

そしてnpm update を実行。

再度npm run dev したら今度はうまくいきました。