Can't read property of undefined (mix.initialize() )when use node_modules/.bin/webpack

Question

I'm trying to compile with node_modules/.bin/webpack and I get this error:

Mix.initialize();       
   ^       
TypeError: Cannot read property 'initialize' of undefined      
at Object.<anonymous> (/home/vagrant/Code/stream/webpack.config.js:9:4)            
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 requireConfig 
(/home/vagrant/Code/stream/node_modules/webpack/bin/convert-argv.js:97:18)     
at /home/vagrant/Code/stream/node_modules/webpack/bin/convert-argv.js:104:17    

webpack.mix.js:

let mix = require('laravel-mix').mix;       
mix.js('resources/assets/js/app.js', 'public/js')      
.sass('resources/assets/sass/app.scss', 'public/css');    

webpack.config.js:

var path = require('path');       
var webpack = require('webpack');      
var Mix = require('laravel-mix').config;    
var plugins = require('laravel-mix').plugins;    
Mix.initialize();

I'm following this video: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26?autoplay=true

And crash at 03:29, i really appreciate any help.

Answer 1

In the latest version of laravel-mix you don't need require mix property. According library documentation you just need in webpack.mix.js file:

let mix = require('laravel-mix');

Also in package.json in section scripts you should have path to your vendor file with laravel-mix (if you don't need custom config), for example:

  "scripts": {
     "dev": "webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

Answer 2

Well, finally i do it.

In video he remove some package of package.json at the beginning. (laravel-mix included) and after this he install laravel-mix 0.3 version.

So when i create the laravel project i don't remove laravel-mix (the version is "0.*". If i do that and i run npm run dev always is good.

I can't understand why he remove package and install it before, and do

cp -r node_modules/laravel-mix/setup/** ./

Hope that's usefull to somebody.

Answer 3

I was following the same video. Here are the steps I took to get past this same error:

1. $laravel new stream --dev
2. $cd stream
3. $npm install
4. $npm install babel-loader sass-loader vue-loader --save-dev
5. $cp node_modules/laravel-mix/setup/webpack.config.js ./

6. Open up ./webpack.config.js and make it look like this:

   require('./node_modules/laravel-mix/src/index');
   require(Mix.paths.mix());
   Mix.dispatch('init', Mix);
   let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');
   module.exports = new WebpackConfig().build();
   

7. $node_modules/.bin/webpack

8. Pick it up around 1:32 in the video

I'm running into more issues in the video as well. If I find solutions to those, I'll update this answer.