Nuxt.js に Stylus を入れてみたが、コンパイルエラーになったのでその解決策

問題

記事執筆日付で、Nuxt.js (v2.14.12, TypeScript ver) で Stylus を使おうと思って、 yarn (v1.22.10) で以下の通りインストールして利用しようとした。

$ yarn add --dev stylus stylus-loader
...
info Direct dependencies
├─ stylus-loader@5.0.0
└─ stylus@0.54.8
info All dependencies
├─ stylus-loader@5.0.0
└─ stylus@0.54.8
Done in 15.21s.

しかし、<stype lang="stylus"> を vue ファイルに含めて yarn dev として実行すると以下のエラーが発生する。

 ERROR  Failed to compile with 1 errors                                                                     friendly-errors 17:48:21

 ERROR  in ./pages/index.vue?vue&type=style&index=0&lang=stylus&                                            friendly-errors 17:48:21

Module build failed (from ./node_modules/stylus-loader/dist/cjs.js):                                        friendly-errors 17:48:21
TypeError: this.getOptions is not a function
    at Object.stylusLoader (/*************/node_modules/stylus-loader/dist/index.js:19:24)

原因と解決策

同じエラーメッセージで悩むパターンが過去にあった。

こちらでは、新しいバージョンの stylus-loader が対応していないということで、１つ古いバージョンの stylus-loader を使えば対応できるとのことだった。
先のインストールログから、stylus-loader のバージョンが 5.0.0 とメジャーバージョンアップされており、まだ vue-cli がこのバージョンに対応していないことが想像できる。

そのため、一度アンインストールして、stylus-loader の4系を入れなおす。

$ yarn remove --dev stylus stylus-loader
$ yarn add --dev stylus stylus-loader@4
...
info Direct dependencies
├─ stylus-loader@4.3.3
└─ stylus@0.54.8
info All dependencies
├─ stylus-loader@4.3.3
└─ stylus@0.54.8

これで再度 yarn dev を実行すれば、コンパイルエラーではなくなった。

当然、時間経過とともに vue-cli で stylus-loader の5系が使えるようにはなるとは思うが、これを見ると今後も loader のバージョンアップの都度同様のエラーが発生する可能性があるので、その場合の解決策として利用できるとも考えて書き記す。