Clever Geek Handbook

Cannot read undefined property (mix.initialize ()) when using node_modules /. Bin / webpack

I am trying to compile with node_modules/.bin/webpack

and I am getting 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 am following this video: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26?autoplay=true

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

+3


source to share


3 answers


Well, finally, I do it.

In the video, it removes the package.json package first. (laravel-mix included) and after that it installs laravel-mix version 0.3.

So, when I create a laravel project, I don't uninstall laravel-mix (version "0. *". If I do that and I run npm run dev, it's always good.



I can't figure out why it uninstalls the package and installs it earlier and do

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

Hope this is helpful to someone.

+1


source


I followed the same video. Here are the steps I took to overcome the same error:

  • $laravel new stream --dev

  • $cd stream

  • $npm install

  • $npm install babel-loader sass-loader vue-loader --save-dev

  • $cp node_modules/laravel-mix/setup/webpack.config.js ./

  • Open the file. /webpack.config.js and do 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();

  • $node_modules/.bin/webpack

  • Turn it up around 1:32 on video


I am having problems with the video. If I find a solution for them, I will update this answer.

+2


source


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

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

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

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


source






More articles:


All Articles