CODEWITHSUNDEEP
vue.jswebpackinternet-explorer-11babeljsbabel-polyfill
mapawa
mapawa

Reputation: 191

Vue not working in IE11 despite Babel Polyfill

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.

Upvotes: 2

Views: 4092

Answers (1)

Hiws
Hiws

Reputation: 10334

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.

Upvotes: 1

Related Questions