Elixir is not defined error - laravel

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
.