Laravel Elixir Browserify Failed!: Unexpected token

Question

I am using Laravel 5.2,
and I am using laravel-elixir to compile this vue component:
https://github.com/sagalbot/vue-select

This is my gulpfile.js:
gulpfile.js

var elixir = require('laravel-elixir');
elixir(function(mix) {
     mix.browserify('main.js', 'public/js/vue-select/main.js');
});

This is the error messages using gulp command:
errors:

$ gulp
[23:19:18] Using gulpfile D:\wnmp\www\laravel-entrust\gulpfile.js
[23:19:18] Starting 'default'...
[23:19:18] Starting 'browserify'...

Fetching Browserify Source Files...
   - resources\assets\js\main.js


Saving To...
   - public/js/vue-select/main.js

[23:19:19] Finished 'default' after 538 ms
[23:19:19] gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

D:\wnmp\www\laravel-entrust\resources\assets\js\App.vue:1
<style lang="scss">
^
ParseError: Unexpected token
[23:19:19] Finished 'browserify' after 846 ms
[23:19:20] gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module 'vue' from 'D:\wnmp\www\laravel-entrust\resources\assets\js'
{ [Error: Cannot find module 'vue' from 'D:\wnmp\www\laravel-entrust\resources\assets\js']
  stream:
   Labeled {
     _readableState:
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: false,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }
[23:19:20] gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module 'vuex' from 'D:\wnmp\www\laravel-entrust\resources\assets\js\vuex'
{ [Error: Cannot find module 'vuex' from 'D:\wnmp\www\laravel-entrust\resources\assets\js\vuex']
  stream:
   Labeled {
     _readableState:
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: false,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }
[23:19:20] gulp-notify: [Laravel Elixir] Browserify Failed!: Cannot find module 'vue' from 'D:\wnmp\www\laravel-entrust\resources\assets\js\vuex'
{ [Error: Cannot find module 'vue' from 'D:\wnmp\www\laravel-entrust\resources\assets\js\vuex']
  stream:
   Labeled {
     _readableState:
      ReadableState {
        objectMode: true,
        highWaterMark: 16,
        buffer: [],
        length: 0,
        pipes: [Object],
        pipesCount: 1,
        flowing: true,
        ended: false,
        endEmitted: false,
        reading: true,
        sync: false,
        needReadable: true,
        emittedReadable: false,
        readableListening: false,
        resumeScheduled: false,
        defaultEncoding: 'utf8',
        ranOut: false,
        awaitDrain: 0,
        readingMore: false,
        decoder: null,
        encoding: null },
     readable: true,
     domain: null,
     _events:
      { end: [Object],
        error: [Object],
        data: [Function: ondata],
        _mutate: [Object] },
     _eventsCount: 4,
     _maxListeners: undefined,
     _writableState:
      WritableState {
        objectMode: true,
        highWaterMark: 16,
        needDrain: false,
        ending: true,
        ended: true,
        finished: true,
        decodeStrings: true,
        defaultEncoding: 'utf8',
        length: 0,
        writing: false,
        corked: 0,
        sync: false,
        bufferProcessing: false,
        onwrite: [Function],
        writecb: null,
        writelen: 0,
        bufferedRequest: null,
        lastBufferedRequest: null,
        pendingcb: 0,
        prefinished: true,
        errorEmitted: false,
        bufferedRequestCount: 0,
        corkedRequestsFree: [Object] },
     writable: false,
     allowHalfOpen: true,
     _options: { objectMode: true },
     _wrapOptions: { objectMode: true },
     _streams: [ [Object] ],
     length: 1,
     label: 'deps' } }

what should I do?

Tomas Buteler · Accepted Answer · 2016-09-11 12:46:06Z

1

You need Elixir's official "Vueify" wrapper:

npm install laravel-elixir-vueify

Then, in your gulpfile.js:

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

require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
});

If you're using Elixir 5 or below, you need a lower version of the wrapper:

npm install [email protected]

answered Sep 11, 2016 at 12:46

Tomas Buteler

4,1474 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel Elixir Browserify Failed!: Unexpected token

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related