Elixir is not defined error

Question

I am using laravel 5.4 and I wanted to set up elixir to compile sass files. I tried to install elixir by running $ npm install and after that, I tried running $ gulp but it gave me the following error:

/home/vagrant/Code/Laravel/gulpfile.js:1
(function (exports, require, module, __filename, __dirname) { elixir(mix => {
                                                              ^

ReferenceError: elixir is not defined
    at Object.<anonymous> (/home/vagrant/Code/Laravel/gulpfile.js:1:63)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at execute (/usr/lib/node_modules/gulp-cli/lib/versioned/^3.7.0/index.js:24:18)
    at Liftoff.handleArguments (/usr/lib/node_modules/gulp-cli/index.js:149:63)

After adding const elixir = require('laravel-elixir');, I am getting this error:

[02:28:30] Starting 'webpack'...
{ [Error: ./resources/assets/js/components/Example.vue
Module parse failed: /home/vagrant/Code/Laravel/resources/assets/js/components/Example.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div class="container">
|         <div class="row">
 @ ./resources/assets/js/app.js 16:25-60]
  message: './resources/assets/js/components/Example.vue\nModule parse failed: /home/vagrant/Code/Laravel/resources/assets/js/components/Example.vue Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type.\n| <template>\n|     <div class="container">\n|         <div class="row">\n @ ./resources/assets/js/app.js 16:25-60',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }

Answer 1

I have the same issue when installing a new laravel app 5.4. When I try to run gulp webpack it shows same error in my console. So what I did, since the laravel 5.4 comes with the new vue version which is the vue 2. You need to require require('laravel-elixir-vue-2'); See sample below:

gulpfile.js

var elixir = require('laravel-elixir');
require('laravel-elixir-vue-2'); // recommended for vue 2
elixir(function(mix) {
    // some mixes here..
    mix.webpack('app.js');
});

If you got errors like elixir related, just npm install them. also check this page here .