技術

【Laravel Mix】core-jsとregenerator-runtimeを使ってIE11 (構文エラーです)に対応した

えび

IEブラウザにて、Laravel Mixでコンパイルしたapp.jsを読み込むと、「SCRIPT1002: 構文エラーです。」と出てVueなどが動作しない
この問題をcore-jsとregenerator-runtimeを使って解消する

ことの経緯

Laravel Mixでコンパイルしたapp.jsをそのまま使用すると、IE11では下記のような「SCRIPT1002: 構文エラーです。」が発生

開いてみると

どうやら、webpackBootstrapのアロー関数でエラーが出ているらしい

解消するために入れるパッケージ

公式が配布しているlaravel-mix-polyfillというパッケージがあったので入れてみたけどIEエラーは解消されず・・・
@babel/polyfill (参考記事)も非推奨になっているので、
公式に記載の通りcore-jsとregenerator-runtimeを使用して解消してみる

めも
  • core-jsは、未対応のメソッドをpolyfillから使用できるようにするパッケージ
  • regenerator-runtimeは、async/await を利用するために必要なパッケージ

core-jsをインストールする

 npm install core-js --save

regenerator-runtimeはデフォルトでnode_modulesに入ってたのでinstall不要だった

app.jsを変更する

  • 続いてresources/js/app.js を編集する
<!-- 省略 -->
window.Vue = require('vue').default

import 'core-js/stable' // ⭐️ 追加
import 'regenerator-runtime/runtime' // ⭐️ 追加
<!-- 省略 -->

これでコンパイル & 確認したところ無事動作した〜

\ 案件のご依頼・ご相談はこちらから /