CODEWITHSUNDEEP
ecmascript-6webpackvue.jsvue-loader
Chris Schmitz
Chris Schmitz

Reputation: 20980

Vue-loader does not recognize es2015 syntax

I'm having an issue with vue-loader where it will not recognize es2015 format.

Here are the steps I'm taking:

//initialize the project via vue-cli
vue init webpack-simple && npm i

// start the webpack-dev-server, this npm script is an alias for the command:
// webpack-dev-server --inline --hot
npm run dev

At this point the files are being hosted by webpack-dev-server at localhost:8080 successfully.

When I modify App.vue and add anything es2015 in I get an error from webpack-dev-server:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello Vue!'
    }
  },
  // added this function call for the ready lifecycle hook
  ready () => alert('worked')
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

example of error

This made me think that the es2015 preset for babel wasn't installed, but it is definitely in the dev dependencies list along with the transform-runtime:

// truncated package.json
{
  ...
  "scripts": {
    "dev": "webpack-dev-server --inline --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^1.0.0",
    "babel-runtime": "^5.8.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "cross-env": "^1.0.6",
    "css-loader": "^0.23.0",
    "file-loader": "^0.8.4",
    "json-loader": "^0.5.4",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.2.1",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  }
}

Plus the docs for vue-loader say that es2015 is enabled by default:

There are many cool features provided by vue-loader:

ES2015 enabled by default;

Is there a step or a configuration I'm missing?

Versions:

Upvotes: 0

Views: 597

Answers (1)

Jeff
Jeff

Reputation: 25231

I think it should be

ready: () => alert('worked')

or

ready(){alert('worked')}

Upvotes: 1

Related Questions