[Vuejs]-Syntax error in IE11 with vue.js, webpack and babel

by

1👍

I had the similar issue. In my case, it was because I am using coffeescript in .vue : lang="coffee".
The script was not converted to ES5, so I edited vue-loader.conf.js to transpile the coffeescript.

I have built this project by vue-cli + vuejs-templates/webpack

“build/utils.js”

exports.scriptLoaders = function (options) {
  options = options || {}

  const coffeeLoader = {
    loader: 'coffee-loader',
    options: {
      transpile: {
        presets: ['env', 'es2015']
      }
    }
  }

  const jsLoader = {
    loader: 'babel-loader'
  }

  return {
    js: jsLoader,
    coffee: coffeeLoader
  }
}

“build/vue-loader.conf.js”

module.exports = {
  loaders: Object.assign({},
    utils.cssLoaders({
      sourceMap: isProduction
        ? config.build.productionSourceMap
        : config.dev.cssSourceMap,
      extract: isProduction
    }),
    utils.scriptLoaders()),
  transformToRequire: {
    video: 'src',
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

This is the repo:
https://github.com/wataruoguchi/play-vue-cli/commit/0bdb9badf82e60696adb393bc351c48a3e69072c

I didn’t use “babel-polyfill” at the end.

-3👍

IE does not support arrow functions and ‘syntax error’ is logged in line:

boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val),

in vendor file.

Leave a comment