起きたこと

とある案件で、Nuxt.jsを使ったWebアプリを開発していたところ、
Google Chrome、Firefox、Safariでは表示できたのに、
Internet Explorer11や MS Edgeではうまく表示されない事態になりました。
Nuxtのデフォルトローディングアイコンが赤くなってぐるぐると回るのです。

MacからVirtualBoxを使って見ていたのでそのせいかな?と思ったのですがちゃんと実機で見ても見れない・・

IE上では全くよくわからない位置にエラーが・・

なるほど、わからん。さすがIE先生は他のブラウザとやることが違うぜ。

環境

  • Nuxt.js v2.11.0
  • SPAモードで開発(SSRでも起きていたのであまり関係なさそう)

まずPolyfillで試みた

参考: Nuxt.jsでIE11対応のPolyfill

Polyfillとは要するに「ブラウザやバージョン違いで非対応になっちゃってるやつをなんとか解決する」手法。すごくなんとかしてくれそう。

しかし上記を参考に必要そうなものを足してみるも、なんだかエラーが出てしまいました

Module build failed (from ./node_modules/babel-loader/lib/index.js
Type Error: ~~~中略~~~ this.setDynamic is not a function
...

this.setDynamicてなんだ、と調べてみると、同様に困っている海外の方がちらほら。
おっ!と思い真似してみるも解決せず、なんか茨の道を行きそうだと思いPolyfillでやるのを断念

transpileで直った

こういう時は「エラーをちゃんとよく読め」と先人たちがよく言っているので見てみたところ、
エラーだよ!!!と怒られている位置がkyというプラグインの辺りだと判明。

kyってなんだ・・?と調べてみると、こんな記事が出てきました。

要約すると
HTTPリクエストを使う時、Nuxt.jsはずっとaxiosの使用を推奨していた
→いろいろ不都合が出てきたので、独自の@nuxt/httpというモジュールを作り始めた
→このモジュールはsindresorhus/kyライブラリというのをベースにしている

...とのことです。僕自身Nuxt.jsをちゃんとやり始めてまだ半年ほどなので何がなんやら。
新しい友達の親が実は離婚しててお父さんは二人目なんだって言われてへぇ〜って感じですが、この例えはやめましょうね。
そしてkyのREADMEをつらつら読んでいくと、原因らしき部分を発見

対応ブラウザが最新(?)のChrome、Firefox、Safariのみ... IEとedgeがない!!

気になってさらに「ky nuxt.js」で検索していくと、なんとNuxt.jsの公式ドキュメントへとたどり着きました。

Nuxtjs.org#transpile

引用:
特定の依存関係を Babel で変換したい場合、build.transpile を追加することができます。transpile の項目は、マッチする依存ファイル名の文字列または正規表現オブジェクトになります。

module.exports = {
  build: {
    transpile: [
      ({ isLegacy }) => isLegacy && 'ky'
    ]
  }
}

めっちゃサンプルコードに使われてるじゃないですか!

このコードをnuxt.config.jsに追加すると、kyライブラリの依存関係をうまいこと解消してくれるらしい。

「いや、そんなまさか」とおもいつつ追加すると......直りました!

Nuxt.jsでkyトラブルはあるあるネタ?

サンプルコードに使われるくらいなので、頻発する問題なのかなと思いました。
その割に文献があまりなかったのは「あんまり起きないレアなトラブル」なのか「備忘録を書くほどでもない余裕なトラブル」なのか...相変わらず初心者には厳しい世界です。

まとめると

  • IE、EdgeでNuxt.jsが動かない時は、エラーが出てそうなとこのプラグインをtranspileに入れる
  • やっぱりエラーをよく読むのは大事
  • やっぱり情報にアンテナ張っておくのも大事
  • やっぱりIEは(略