title: Vue not working in IE11 despite Babel Polyfill
body: <p>unfortunately, my most recent application is required to support Internet Explorer 11. This requirement came somewhat suprising to me, so I already built the applications frontend with Vue.js. The backend is written in Laravel, therefore I use laravel-mix/webpack.</p>
  <p>This is my <code>app.js</code>:</p>
  <pre><code>require('./bootstrap');
  window.Vue = require('vue');
  </code></pre>
  <p>Obviously, IE11 doesn't support Vue.js so I tried the following ways of transpiling/polyfilling the code.</p>
  <h2>1. requiring polyfill</h2>
  <p><strong>Approach</strong>: Adding <code>require(&quot;@babel/polyfill&quot;);</code> to the top of my <code>app.js</code> as described in <a href="https://babeljs.io/docs/en/babel-polyfill" rel="nofollow noreferrer">https://babeljs.io/docs/en/babel-polyfill</a></p>
  <p><strong>Result</strong>: Following Error Message shown in IE console:</p>
  <blockquote>
  <p>SCRIPT1003: ':' expected</p>
  </blockquote>
  <p>Clearly a compatibility issue, since pre <code>data(){}</code> is invalid in ES &lt; 5</p>
  <br>
  <h2>2. using mix.babel</h2>
  <p><strong>Approach</strong>: Adding <code>mix.babel(['resources/js/app.js'], 'resources/js/app.js')</code> to my <code>webpack.mix.js</code> as described in <a href="https://laravel.com/docs/5.8/mix" rel="nofollow noreferrer">https://laravel.com/docs/5.8/mix</a> (I am using laravel 5.8.36). My <code>webpack.mix.js</code> now looks like this:</p>
  <pre><code>const mix = require('laravel-mix');
  mix.js('resources/js/app.js', 'public/js/app.js')
  mix.babel(['resources/js/app.js'], 'resources/js/app.js')
  mix.sass('resources/sass/app.scss', 'public/css');
  </code></pre>
  <p><strong>Result</strong>: Same Error Message as in <strong>1</strong></p>
  <br>
  <h2>3. using an mix extension</h2>
  <p><strong>Approach</strong>: Installing this extension: <a href="https://laravel-mix.com/extensions/polyfill" rel="nofollow noreferrer">https://laravel-mix.com/extensions/polyfill</a> and configure my <code>webpack.mix.js</code> as described. My <code>webpack.mix.js</code> now looks like this:</p>
  <pre><code>const mix = require('laravel-mix');
  require('laravel-mix-polyfill');
  
  mix.js('resources/js/app.js', 'public/js/app.js')
  mix.sass('resources/sass/app.scss', 'public/css');
  mix.polyfill({
      enabled: true,
      useBuiltIns: &quot;usage&quot;,
      targets: {&quot;firefox&quot;: &quot;50&quot;, &quot;ie&quot;: &quot;11&quot;}
  })
  </code></pre>
  <p><strong>Result</strong>: Again, the same Error Message as in <strong>1</strong></p>
  <br>
  <h2>4. manually transpiling with babel-cli</h2>
  <p><strong>Approach</strong>: Merely out of desperation I tried to manually transpile my <code>app.js</code> with the following command <code>./node_modules/.bin/babel ./public/js/app.js --out-dir ./public/js/</code></p>
  <p><strong>Result</strong>: Stil no luck, same error as in <strong>1</strong></p>
  <p>I am really starting to get frustrated, so <strong>any</strong> help is much appreciated.</p>