Vue.js 2.0 Module build failed: SyntaxError: Unexpected token using webpack, Elixir and gulp

Question

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 ?

score 0 · Answer 1 · answered Feb 16 '17 at 19:22

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.

Vue.js 2.0 Module build failed: SyntaxError: Unexpected token using webpack, Elixir and gulp

1 Answers1