More than 5 years have passed since last update.

Nuxt.js IE11 で syntax error が発生する場合

Last updated at 2019-11-19Posted at 2019-11-19

解決法

nuxt.config.js (ts) に以下を追加

  ...
  build: {
    // 特定の依存関係を Babel で変換したい場合、マッチする依存ファイル名の文字列または正規表現オブジェクトをここに書く
    transpile: [
      'helpful-decorators'
    ]
  }
  ...

今回は、 helpful-decorators というモジュール内で arrow function が使われていたことが原因だったので

helpful-decorators を transpile に追加

node_modules 下のモジュールに事前に Babel を通す機能

上記の transpile でも解決しない場合があります

例えば is-https というモジュールはソース内で、デフォルト引数を使っています

この書き方は、 transpile で解決できないため（たぶんNuxtの仕様、未調査です🙏）

モジュールを node_modules から import するのではなく

src ディレクトリ下にモジュールの index.js ファイルを配置し、 import して使うことで強制的に Typescriptコンパイラを通すことができます

Typescriptコンパイラはデフォルト引数を、IEで動作する記述に変更してくれる ため、IE11で動作するようになります