vue.jsnpmvue-cli

vue-cli-service: SyntaxError: Unexpected token '...'. Expected a property name

I'm working on putting together a small app using vue, and I specifically need it to run on a device that does not support ES6. I'm using vue-cli-service build to build, and when trying to open this page on my ES5 device, I'm seeing this error SyntaxError: Unexpected token '...'. Expected a property name.

I have installed babel, and added this to my .babelrc: { "presets": ["@babel/preset-env"] }

I'm not really sure what else to try, I haven't been able to find anything that specifically addresses this. Even the vue-cli-service documentation suggests ways to support polyfill for ES5, but I don't think this is the same thing.

Solution

  • I had this problem with Vuetify and Safari 11.1

    I guessed I needed to transpile the ES6 version of Vuetify for older browsers. The solution was difficult to search for, as most of the suggestions were about modifying webpack or babel configuration, which I find obscured inside Vue CLI.

    I eventually uncovered the solution myself by rebuilding my project from scratch via Vue CLI, and the installer magically added a transpilation option for Vuetify which I was missing - I think because I had previously upgraded Vuetify across the ES5 to ES6 versions, and perhaps their upgrade script doesn't perform this step.

    vue.config.js

    module.exports = {
 "transpileDependencies": [
   "vuetify"
 ],}

    this is the equivalent of webpack

    build: {
    transpile: ['vuetify']
}

    Restart the build and reload.

    Of course you will need to find which of your packages it is - this is just an example. I just dug around in the error stack until finding something which belonged to Vuetify.