もくじ
- IEで見たら、アプリ死んでた
- polyfillかな？
- packageから探してtranspile
- 結論：エラーはよく読め
IEで見たら、アプリ死んでた
アプリとかサイト作ったら、IEでチェックしますよね。 戦々恐々としながら、ちゃんと表示されるかな...？って思って見たら、「ほらやっぱり表示されてないー」みたいなのがたまーにあります。 今回は、以下のようなエラーが出ていました。
polyfillかな？
まあそんな時は、ES6とかの構文がBabelで変換できてないんだろうなー 設定漏れかな？とか思ってチェックしてみるわけですね。
今回はNuxtを使っていて、defaultで core-js@2 が使われるから、使っている構文的には問題ないんじゃ？ 設定ミスか？なんて思って、ひたすらBabelのOptionをいじっていました。
debug: true にして、logを追ってということを数時間やっていました。
babel: {
presets ({ isServer }, [preset, options]) {
return [
[
preset,
{
...options,
targets: isServer
? { node: 'current' }
: { browsers: ['last 2 versions'], ie: 11 },
corejs: { version: 2 },
debug: true,
},
],
]
},
@ymmooot くんに、アドバイスを求めたりしながら、
transform-template-literals { "android":"76", "ie":"11", "opera":"12.1", "safari":"12.1" }
ってなっているのに、buildされたjsの中で使われているから、IEで死んでるんだろうというところまで分かってきました。
そこから、
山本 : 「babelってないnode_moudlesのコードかな〜」
なんてアドバイスをもらって、え、まじ？そういうパターンあるのか と思って調べてみました。
packageから探してtranspile
そこで改めて、元々表示されていたエラーメッセージに戻ります。
文字が正しくありません。 93~~~.js (1, 2453)
ということで、実際にエラーが出ていたbuild後のファイルの該当箇所（1行目、2453文字目）を見てみると、
innerHTML=`@keyframes ${t} {${n}}`
という部分が残っていました。
Template literal のブラウザ実装状況を見てみると、IEは対応していない。 なるほどここかーってなりながら、*1の参考記事を見ながら、transpileを追加してやりました。
build: {
publicPath: '/assets/',
extractCSS: true,
transpile: [
/(.+)(library-name\/src\/path\/)(.+)(\.js)$/,
],
babel: {
presets ({ isServer }, [preset, options]) {
return [
[
preset,
{
...options,
targets: isServer
? { node: 'current' }
: { browsers: ['last 2 versions', '> 0.25%, not dead'], ie: 11 },
corejs: { version: 2 },
},
],
]
},
},
上記対応で、無事IEでも見れるようになりました。
結論：エラーはよく読め
この一連の流れ、できる人からしたらイケてなさが溢れていると思います。 最初からエラーメッセージをよく読んで、エラーが出ているファイルの該当箇所を読めば、すぐにデバッグできた内容かと思います。 普段から、エラーメッセージはよく読もうと言っている自分がこのようなことをしていて、とてつもなくでかいブーメランを投げてしまったなと反省しています。。 こういうことがありましたよというやってしまったネタとして後悔して供養しつつ、自分への戒めとしたいと思います。
