I have developed a Vue application that needs to function properly in an ES5 browser (specifically iOS 9).
One issue I've encountered is that some of the functions within the Vue components are being transformed into Arrow functions: ()=>, which is causing compatibility problems with iOS 9 Safari. What's puzzling is why some functions are transpiled correctly while others are not.
For example, consider this snippet from a Vue component:
data() {
return {
birthday: '',
accepted: false,
acceptedForSelectedKids: false
};
},
computed: {
dataPrivacyLink() {
return settings.data_privacy_link;
},
isOverFifTeen() {
if (this.privacyToEdit && this.privacyToEdit.owner.age) {
return this.privacyToEdit.owner.age > 15;
}
if (this.birthday) {
return differenceInCalendarYears(new Date(), new Date(this.birthday)) > 15;
}
return false;
}
}
The data and dataPrivacyLink functions are transpiled into arrow functions, but for some reason the isOverFifTeen function is not.
Here is how it appears after being transpiled:
data:()=>({birthday:"",accepted:!1,acceptedForSelectedKids:!1}),computed:{dataPrivacyLink:()=>settings.data_privacy_link,isOverFifTeen(){return this.privacyToEdit&&this.privacyToEdit.owner.age?this.privacyToEdit.owner.age>15:!!this.birthday&&function(e,t){Object(c.a)(2,arguments);var o=Object(a.a)(e),n=Object(a.a)(t);return o.getFullYear()-n.getFullYear()}(new Date,new Date(this.birthday))>15}
This behavior may be attributed to how webpack is configured:
{
test: /\.vue$/i,
loader: 'vue-loader'
},
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: [/node_modules/]
},
Additionally, this is the babel.config.js file:
module.exports = {
presets: [['@babel/preset-env', { modules: false }]],
plugins: ['@babel/plugin-syntax-dynamic-import'],
env: {
test: {
presets: [['@babel/preset-env']]
}
}
};
In the package.json file, I specified the targeted browsers in the browserslist:
"browserslist": [
"> 0.5%",
"last 2 versions",
"not ie <= 11",
"ios_saf >= 9",
"not dead"
]
How can I prevent these arrow functions from being used?