【エラー】TypeError:loaderContext.getOptions is not a function 　の原因と解決策

はじめに

React + Laravel + Typescript の環境で開発を始めようとすると、環境構築の時点でエラーが大量発生なんてことがあります。

今回はそのエラーの一つである TypeError:loaderContext.getOptions is not a function　を取り上げてその原因と解決策を説明していきたいと思います。

エラーの意味

まず、このエラーを解決する前にこのエラーが何を意味しているのか知る必要があります。

TypeError:loaderContext.getOptions is not a function は、簡単に訳すと 「loaderContext 内の getOptions は関数ではないよ（無効だよ）」 ということです。

つまり、この loaderContext 周りに問題があるという事ですね。

しかし、こんなの身に覚えないよという方がほとんどだと思います。（多分わかってたら調べないと思いますからｗ）

では、これが何なのかというと問題は ts-loader にありました。

エラーの原因

React+laravel+Typescript の環境を構築するために初めに、TS の型に関する依存関係をインストールされたと思います。

その中に、TS トランスパイラの一つとして ts-loader というものがありましたね。今回のエラーの原因はそれです。

問題は、この ts-loader というパッケージのバージョンが新しすぎた 事が原因です。

何か一つでもパッケージが、その Laravel のバージョンで認識できるパッケージより新しい場合、Laravel はエラーを吐かざる負えません。

今回は私は、Laravel6（最新は 8）の環境で行っているためそのようなバグがおこりやすくなったと言えるでしょう。

では、どのようにしてこのエラーを解消させるのでしょうか。

解決策

一度アンインストールして少し古いパッケージにすれば良いだけですね。

npm uninstall ts-loader
npm install ts-loader@8.2.0 --save

まとめ

いかがだったでしょうか

このように、Laravel のバージョンを安定させるために少し古いバージョンを使おうとすると依存関係でエラーが出てしまいます。

尤も、最新の 8 は教材が少なすぎるため 6 のほうが良いと思います。

これからももっとエラー等幅広く書いていきますので是非、ブックマーク登録等よろしくお願いします。