Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 4 down vote favorite
1

After spending almost complete day trying to upgrade from Vue.js 1.X to Vue.js 2.0 I'm still getting errors (using gulp watch)

ERROR in ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/example.vue Module build failed: SyntaxError: Unexpected token (41:79) at Parser.pp$4.raise (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp.unexpected (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:603:10) at Parser.pp$3.parseExprAtom (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1822:12) at Parser.parseExprAtom (/home/vagrant/Projects/test/node_modules/buble/dist/buble.umd.js:656:26) at Parser.pp$3.parseExprSubscripts (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1692:19) at Parser.pp$3.parseExprOps (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1597:21) at Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1608:25) @ ./resources/assets/js/components/example/exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.js

I tried to install multiple times and now ended with the following package

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "dependencies": {
    "babel-core": "^6.18.0",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-runtime": "^6.18.0",
    "bootstrap": "^3.3.7",
    "bootstrap-switch": "^3.3.2",
    "css-loader": "^0.25.0",
    "lodash": "^4.14.0",
    "vue": "^2.0.3",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^9.7.0",
    "vue-resource": "^1.0.3",
    "vue-strap": "^1.1.18"
  },
  "devDependencies": {
    "babel-preset-es2015": "6.9.0",
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "install": "^0.8.2",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.9",
    "npm": "^3.10.9",
    "vue-router": "^2.0.1"
  }
}

my gulpfile looks like

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(mix => {
    mix.sass('app.scss')
        .webpack('app.js')
        .webpack('backend.js')
       //  other stuff. . .  //
}

What's the problem ? How to solve these repeated errors ?

share|improve this question
up vote 0 down vote

Firstly, whenever you get an error unexpected token... its 9/10 syntax error. So go into your example.vue and check if you're missing a colon after methods or computed or data. So this error is definitely in resources/assets/js/components/example/example.vue somewhere around line 40. Secondly I'm not sure what you're trying to accomplish with webpack there but if you want to combine scripts into one, webpack will accept an array of scripts like so:

        .webpack([
          'app.js',
          'scripts/choose-language.js'
        ])

and you can even specify output script filename with second param.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.