Vue not working in IE11 despite Babel Polyfill

Question

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.

This is my app.js :

require('./bootstrap');
window.Vue = require('vue');

Obviously, IE11 doesn't support Vue.js so I tried the following ways of transpiling/polyfilling the code.

1. requiring polyfill

Approach : Adding require("@babel/polyfill"); to the top of my app.js as described in https://babeljs.io/docs/en/babel-polyfill

Result : Following Error Message shown in IE console:

SCRIPT1003: ':' expected

Clearly a compatibility issue, since pre data(){} is invalid in ES < 5

2. using mix.babel

Approach : Adding mix.babel(['resources/js/app.js'], 'resources/js/app.js') to my webpack.mix.js as described in https://laravel.com/docs/5.8/mix (I am using laravel 5.8.36). My webpack.mix.js now looks like this:

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');

Result : Same Error Message as in 1

3. using an mix extension

Approach : Installing this extension: https://laravel-mix.com/extensions/polyfill and configure my webpack.mix.js as described. My webpack.mix.js now looks like this:

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: "usage",
    targets: {"firefox": "50", "ie": "11"}
})

Result : Again, the same Error Message as in 1

4. manually transpiling with babel-cli

Approach : Merely out of desperation I tried to manually transpile my app.js with the following command ./node_modules/.bin/babel./public/js/app.js --out-dir./public/js/

Result : Stil no luck, same error as in 1

I am really starting to get frustrated, so any help is much appreciated.

Answer 1

If you can't get Babel-Polyfill to work, you could try using Polyfill.io , which automatically polyfills the selected Polyfills if the browser requires them.

All you need to do is go the Create a polyfill bundle page, and select the polyfills you need. Then once you've made your bundle, copy the URL at the top and add a <script> tag with said URL to your head .

I personally haven't used it with Laravel, but I've previously fought with babel-polyfill myself, and ended up using Polyfill.io since i couldn't get babel-polyfill to work.