Browserify Failed!: Unexpected token

[davestewart]

When requiring the modal after installing via npm, I get the following error.

[11:45:56] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

/Volumes/Data/Work/Current/2015-07 - Timeslice, Kiosk 3.0/timeslice.kiosk/support/node_modules/vue-bootstrap-modal/src/modal.vue:1
<template>
^
ParseError: Unexpected token
[11:45:56] Finished 'browserify' after 2.32 s
[11:45:56] Starting 'browserSync'...
[11:45:56] Finished 'browserSync' after 166 μs

It seems that this is the default behaviour, but can be overridden:

https://www.npmjs.com/package/babelify#faq

is the solution otherwise to just include the file in your own, local, imports?

By the way - nice module, thanks!

[Coffcer]

I think you might need this. https://github.com/vuejs/vueify

[davestewart]

Hello, yep, that is in my gulp pipeline, and the .vue files in my app folder compile fine.

Do you think there's another reason why it's not working for me?

[Mat-thieu]

Same problem, probably because browserify isn't expecting a vue component, if you don't include the .vue extension it expects pure javascript and bugs out. I solved it by delving into the node_modules and placing the modal.vue component inside a global components folder inside my project require('../../../common-components/modal.vue') It's a hotfix though, not really a solution

[franvera]

Add this inside package.json "browserify": { "transform": [ [ "babelify", { "presets": [ "es2015" ] } ], [ "vueify" ] ] },

[Mat-thieu]

Thank you @franvera ! This worked for me

[davestewart]

@franvera - inside the package.json for my project, or vue-bootstrap-modal ?

[Coffcer]

fixed https://github.com/Coffcer/vue-bootstrap-modal/pull/5

[franvera]

@davestewart for vue-bootstrap-modal. It has been merged with pull request #5 now.