2

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.

Community
  • 1
  • 1
mapawa
  • 179
  • 1
  • 4
  • 16
  • Which version of Vue.js are you using? I have created a new Vue sample (based on [this link](https://cli.vuejs.org/guide/creating-a-project.html#vue-create)) and use the default preset (babel, eslint). it seems that it works well in IE browser. The result [like this](https://i.stack.imgur.com/VjJGi.png), please check it. Besides, can you post the Enough code to reproduce the problem as in [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – Zhi Lv Jun 16 '20 at 14:46
  • Besides, here are some related articles about using babel with Vue.js, you could check them: https://cli.vuejs.org/guide/browser-compatibility.html#browserslist, https://babeljs.io/docs/en/next/babel-preset-env.html, https://cli.vuejs.org/core-plugins/babel.html#configuration – Zhi Lv Jun 16 '20 at 14:54

1 Answers1

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.

Hiws
  • 8,230
  • 1
  • 19
  • 36