How can i transpile arrow functions in vue files?

user_2154005 0
Viewed 725

I have a Vue application which should work in a ES5 Browser (iOS 9).

Some of the functions in Vue components are transformed to Arrow functions: ()=> which breaks iOS9 Safari. And i don't really understand why some are transformed correctly and some not.

Example:

This is a part 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 the dataPrivacyLink functions are transpiled to arrow functions, but not the isOverFifTeen function.

Here is how it looks 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 is how webpack is configured:

                {
                    test: /\.vue$/i,
                    loader: 'vue-loader'
                },
                {
                    test: /\.js$/,
                    loaders: ['babel-loader'],
                    exclude: [/node_modules/]
                },

And this is the babel.config.js:

module.exports = {
    presets: [['@babel/preset-env', { modules: false }]],
    plugins: ['@babel/plugin-syntax-dynamic-import'],
    env: {
        test: {
            presets: [['@babel/preset-env']]
        }
    }
};

In package.json i configured which browsers to use:

"browserslist": [
    "> 0.5%",
    "last 2 versions",
    "not ie <= 11",
    "ios_saf >= 9",
    "not dead"
  ]

How can i stop these arrow functions?

vue-loader vue.js webpack ecmascript-5 javascript
2 Answers

If you are using Webpack 5, you need to specify the features that you want to transpile in the ouput.environment configuration, as explained here: https://webpack.js.org/configuration/output/#outputenvironment.

output: {
  // ... other configs
  environment: {
    arrowFunction: false,
    bigIntLiteral: false,
    const: false,
    destructuring: false,
    dynamicImport: false,
    forOf: false,
    module: false,
  },
}
user_23425370

try to add the plugin in babel.config.js

module.exports = {
    presets: [['@babel/preset-env', { modules: false }]],
    plugins: [
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-transform-arrow-functions' // add this
    ],
    env: {
        test: {
            presets: [['@babel/preset-env']]
        }
    }
}
user_159239730
Related