Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello,
I think I configured everything fine but it won't work. Here is my whole configuration:
Gulpfile:
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.sass('app.sass');
mix.browserify('backend.js');
mix.browserify('frontend.js');
mix.styles([
'../../../node_modules/github-markdown-css/github-markdown.css',
'../../../public/css/app.css'
], 'public/css');
mix.version([
'css/all.css',
'js/backend.js',
'js/frontend.js'
]);
});
frontend.js:
var Vue = require('vue');
Vue.use(require('vue-resource'));
new Vue({
el: 'body',
components: {
'image-preview': require('./components/ImagePreview.js'),
'theme-preview': require('./components/ThemePreview.js'),
'readme': require('./components/Readme.js'),
'PulseLoader': require('vue-spinner/src/PulseLoader.vue')
}
});
The error:
PROJECT-PATH/node_modules/vue-spinner/src/PulseLoader.vue:1
<template>
^
ParseError: Unexpected token
Any ideas?
Looks like you're using an old version of vueify and (maybe) npm. As far as I know you should upgrade npm to at least 3.5 and vueify to 7.0.0.
Better remove the vueify dependency and use jeffrey's new repo of elixir: https://github.com/JeffreyWay/laravel-elixir-vueify
I use npm version 3.3.12 and this is my package.json:
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"csstyle": "^1.5.0",
"foundation-sites": "^6.1.1",
"github-markdown-css": "^2.1.1",
"gridle": "^2.0.43",
"laravel-elixir": "^4.0.0",
"laravel-elixir-stylus": "^1.0.1",
"laravel-elixir-vueify": "^1.0.1",
"poststylus": "^0.2.1",
"vue": "^1.0.10",
"vue-resource": "^0.1.17",
"vue-spinner": "^1.0.0"
}
}
Ping @JeffreyWay
@Phillipp I've the same problem :/ its been 3 days since I posted and no one could solve it yet.
Tried with a fresh project. Same error.
Hey @JeffreyWay it would be good if you look at this. I really want to use .vue components.
I had this error, ensure you're up to date with node and npm, delete node_modules directory then npm install again.
I am having this error as well and updated node and npm (I am on Node v4.2.4 and npm 3.5.2). This is my package.json
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"gulp-shell": "^0.5.1",
"csstyle": "^1.5.0",
"foundation-sites": "^6.1.1",
"github-markdown-css": "^2.1.1",
"gridle": "^2.0.43",
"laravel-elixir": "^4.0.0",
"laravel-elixir-stylus": "^1.0.1",
"laravel-elixir-vueify": "^1.0.1",
"poststylus": "^0.2.1",
"vue": "^1.0.10",
"vue-resource": "^0.1.17",
"vue-spinner": "^1.0.0",
"babel-preset-es2015": "^6.3.13"
}
I deleted the node_modules directory and ran npm install as instructed ( @JoeDawson )
My gulpfile is super-simple
var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix
.sass('app.scss')
.browserify('main.js');
});
I still get the following when running 'gulp'
09:46:01] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token
/Users/jgravois/Ventures/ezlearn/sandbox/resources/assets/js/components/Alert.Vue:1
<template>
^
ParseError: Unexpected token
There is no npm 3.5 for OSX, lol. The latest version I can get and have is 3.3.12
➜ ~ npm -v
2.14.12
I don't have any issues :)
@JoeDawson And what's the difference between your and our setup?
Oh, thought it was on Elixir 4.0 - guess not.
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"laravel-elixir": "^3.0.0",
"laravel-elixir-browserify": "^0.8.1",
"vue": "^1.0.4",
"vueify": "^5.0.2",
"vue-resource": "^0.1.16",
"vue-router": "^0.7.5"
}
}
Some of my dependencies might be obsolete.
So your setup is a bit older. I really don't want to downgrade my setup now.
It's a working version though :)
But downgrading is still not an option for me. If it doesn't work on never versions, then it's broken.
I don't expect any solutions here. Will search for better libraries.
@Phillipp - Obviously you do expect solutions here, because you keep bumping the thread.
Upgrade to the latest version of NPM and Node, delete your node_modules directory, and try to npm install again.
@JeffreyWay Did that so many times. Even on a completely fresh project (https://laracasts.com/discuss/channels/vue/parseerror-unexpected-token-template/replies/126605)
@Phillipp - What does node -v return?
3.3.12.
For my package.json look here: https://laracasts.com/discuss/channels/vue/parseerror-unexpected-token-template/replies/126315
@Phillipp - That's NPM. What does node -v return?
@Phillipp yes there is a 3.5+ npm version for OS X. Though, that's not the solution either.
@JeffreyWay I am running into the same error. I have updated to the latest versions of node and npm, deleted de node_modules folder and reinstalled many times, still the error remains.
npm -v: 3.5.2 node -v: 5.3.0
I can only get npm 3.3.12 with the latest node version from nodejs.org.
@Phillipp update it by running
npm update -g npm
Even with the newest version no success.
Got the same problem. What I did was move the vue-spinner components to resources folder and it works.
@az_iar damn, found out the same right now. ...why is the "notify me" checkbox here unchecked again?
These repos helped me with npm -v of 3.6.0
I had the error as well. I updated npm to 3.8.3 and node to 5.10.1.
Then, followed the instructions on https://github.com/JeffreyWay/laravel-elixir-vueify
And that got rid of my error.
I was getting this error with any npm installed vue components
gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token
I updated node and npm, deleted node_modules folder, and installed again- same error.
I read @az_iar solution but i didn't really understand it, until i came about same solution.
So here is what i did to solve token problem I copied vue-thirdpartycomponent.vue to the folder: resources/assets/js/component
components: {
'simple-datepicker': require('./component/vue-thirdpartycomponent.vue')
}
Please or to participate in this conversation.