前提

pakcage.jsonbrowserslistは指定してあって、ある時点まではIE11でも動いていた。

エラーの原因を特定

こちらの記事と似たような事象だと思ったが。

NuxtのSSGでWebページを作る仕事をしており、その際IE11対応をする必要がありました。既にChromeやEdgeなど他のブラウザではちゃんと動いている状態だったのですがIEでだけ表示が崩れていました。(まぁよくあるこ...

キャプチャのようにエラーがバンドルされて1つになったJS内で起きていたためどこに原因があるのか全く分からなかった。

そこでまずはこちらの記事を参考に読み込んでいるモジュール単位にビルド後のファイルを分割するようにした。

This is a post borne out of frustration to help all those poor souls out there trying to find a solution to the dreaded IE white screen of death.

vue.config.js

    configureWebpack: {
      optimization: {
        runtimeChunk: 'single',
          splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
              vendor: {
                test: /[\\/]node_modules[\\/]/,
                name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`;
              }
            }
          }
        }
      }
    }

自作のVue.jsコンポーネントの構文エラー

上記の対応を行うと、Minifyされていないソースコード位置にジャンプできるようになったので読んでみると、自作のチェックボックスのコンポーネントを読み込むところでエラーになっていた。

こちらの記事を参考にstrictモードを切ってみようとするもうまくいかず。

BabelでJavaScriptをコンパイルするとデフォルトで"use strict";が付きます。ソース・コードがstrictに書かれたものなら良いのですが、いろいろ事情があってstrictではない場合もあり、"use stric...

こちらの投稿にチェックボックスでv-modelcheckedを一緒に使ってるとエラーになると書かれていたので試しに消してみるとエラー箇所が変わった。

Good day. We are building our application using Vuejs/Vuex/vue-router using the https://github.com/vuejs/vue-hackernews-2.0 When building and viewing our application using IE11 we get a SCRIPT1046:

IE11非対応のライブラリのトランスパイル

コンポーネントのエラーが解消したところで別のエラーが出るようになった。
node_modules配下にインストールされているライブラリはデフォルトではトランスパイルの対象とならないため、IE11非対応のライブラリの場合エラーになるとのこと。

バンドルを抑制したことでライブラリごとのjsファイルが生成されるようになり、どのライブラリでエラーが出ているのか確認できたので、これを指定。
今回はpackage.jsonに書かれているライブラリとpackage-lock.jsonに書かれている依存ライブラリにエラーがあった。

vue.config.js

  },
  transpileDependencies: ['library1', 'library2'],
  configureWebpack: {

この2つの対処をしたところ無事表示されるようになった。

元記事はこちら

https://qiita.com/danishi/items/35db0170eff53e2f3ab6
著者:
@danishi