How can I install laravel-mix in laravel 5.3

Published 1 year ago by mazinoukah

I tried to install laravel-mix in laravel 5.3 but i keep getting errors :

    npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture:          [email protected]
    npm WARN [email protected] requires a peer of [email protected] || ^2.1.0-beta but none was installed.
    npm WARN [email protected] requires a peer of [email protected]^2.1.0-beta.19 but none was installed.
    npm WARN [email protected] requires a peer of [email protected]^2.1.0-beta.26 but none was installed.

Pls how can i fix this ? i also removed laravel-elixir from my dependencies list

Olixr
Olixr
1 year ago (34,800 XP)

I was trying to do this as well and ran into issue.

I read through the docs and watched the screen cast of https://laracasts.com/series/learn-vue-2-step-by-step/episodes/23.

No luck yet.

I am still a bit stuck. Any direction would be appreciated.

jbruni
jbruni
1 year ago (1,020 XP)

All these warning messages are telling that "webpack" dependency is missing.

You can try: npm install [email protected]^2.1.0-beta.26 --save-dev

Not sure which webpack version will satisfy all dependency needs.

Olixr
Olixr
1 year ago (34,800 XP)

I ended up getting things working on 5.3 just fine.

Make sure to update your package.json file with new dependencies. I used webpack 2.1.0

Also if you want to edit the webpack config more, copy the webpack.config.js from node_modules/laravel-mix/setup to your project root.

Olixr
Olixr
1 year ago (34,800 XP)

Here is a guide for anyone having trouble getting laravel-mix setup on a 5.3 project. I know I ran into a few bumps along the way.

Update your package.json file

(You can also run npm install laravel-mix) however, I found it easier to update the package file manually.

Here is what mine looks like (don't forget to add any other dependancies you are using in your personal projects.

{
  "private": true,
  "scripts": {
    "webpack": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "dev": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "hmr": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.4.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "webpack": "^2.1.0-beta.28"
  }
}

Clean node_modules and install new ones

Here you can use npm prune and then npm install --save-dev to clean up your node_modules and install the new ones we specified in the package.

Personally I just deleted the node_modules folder and then npm install --save-dev to get a fresh copy.

Copy configuration files

Inside node_modules/laravel-mix/setup there is some example configuration files you can copy that Jeff has provided. You can do this from the terminal by running cp -r node_modules/laravel-mix/setup/** ./. You should now have a webpack.config.js and webpack.mix.js file in your project root.

Configure Laravel-mix

I didn't have to change anything in the webpack.config.js file but I did update the webpack.mix.js config.

By default its set to look for a src/app.js and src/app.scss file. However these directories don't exist in my laravel project, so update those to look in the resources/assets folder.

Here is my webpack.mix.js file:

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

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Done!

Now if you copied my package.json scripts (which I got from Jeffs doc in github), you can run npm run dev and you should be good to go!

You can also remove the old gulp file and other gulp related things if your no longer using them. Laravel-mix is set to use webpack out of the box. Also hmr was working for me with my Vue components.

zippex
zippex
1 year ago (39,590 XP)

Followed @Olixr s instructions step by step and always ran into the following issue.

[email protected]:~/Code/my.project$ npm run webpack

> @ webpack /home/vagrant/Code/my.project
> cross-env NODE_ENV=development webpack --progress --hide-modules

keywords if/then/else require v5 option
/home/vagrant/Code/my.project/node_modules/laravel-mix/src/Mix.js:67
        let entry = this.js.reduce((result, paths) => {
                           ^

TypeError: Cannot read property 'reduce' of undefined
    at Mix.entry (/home/vagrant/Code/my.project/node_modules/laravel-mix/src/Mix.js:67:28)
    at Object.<anonymous> (/home/vagrant/Code/my.project/webpack.config.js:46:28)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at requireConfig (/home/vagrant/Code/my.project/node_modules/webpack/bin/convert-argv.js:98:18)
    at /home/vagrant/Code/my.project/node_modules/webpack/bin/convert-argv.js:111:17
    at Array.forEach (native)
    at module.exports (/home/vagrant/Code/my.project/node_modules/webpack/bin/convert-argv.js:109:15)
    at Object.<anonymous> (/home/vagrant/Code/my.project/node_modules/webpack/bin/webpack.js:141:40)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)

npm ERR! Linux 4.4.0-22-generic
npm ERR! argv "/usr/local/bin/node" "/usr/bin/npm" "run" "webpack"
npm ERR! node v7.4.0
npm ERR! npm  v4.1.1
npm ERR! code ELIFECYCLE
npm ERR! @ webpack: `cross-env NODE_ENV=development webpack --progress --hide-modules`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ webpack script 'cross-env NODE_ENV=development webpack --progress --hide-modules'.

After reading through https://github.com/webpack/webpack/issues/3562 I changed the webpack version to "webpack": "^2.2.0-rc.8" and tried npm install & npm shrinkwrap.

Well, now the "keywords if/then/else require v5 option" hint is gone but I'm still running into this:

> cross-env NODE_ENV=development webpack --progress --hide-modules

/home/vagrant/Code/my.project/node_modules/laravel-mix/src/Mix.js:67
        let entry = this.js.reduce((result, paths) => {
                           ^

TypeError: Cannot read property 'reduce' of undefined
    at Mix.entry (/home/vagrant/Code/my.project/node_modules/laravel-mix/src/Mix.js:67:28)

Any further hint will be appreciated :)

zippex
zippex
1 year ago (39,590 XP)

Ouch, got it. There is a hint within https://github.com/JeffreyWay/laravel-mix/commit/4e78e374f9220166c907931982cc92379c538fee#diff-ee68988ce000eda7b5b11a8985aa3d5c

Laravel Mix: You must call "mix.js()" once or more.

In my test I just tried to compile a sass file and no js resource files. I've added an empty js file, so this is working now:

mix
    .js('resources/assets/js/empty.js', 'public/js')
    .sass('resources/assets/less/app.scss', 'public/css');
sbcman74
sbcman74
1 year ago (106,950 XP)

Thanks for the guide. Worked perfectly to add to a 5.3 and 5.4 application.

Olixr
Olixr
1 year ago (34,800 XP)

Glad to hear! I am using this as I go through the vue series with hot module reloading. I'm a fan of the changes to mix so far.

Question, does anyone know if its possible to pull all files for a directory rather than specify each file in the folder?

i.e. mix.js('resources/assets/js', 'public/js')

Were ideally it would compile each file down to a new one.

Xation
Xation
1 year ago (14,380 XP)

Any idea why that move some pics related in my css on the public folder ?

 DONE  Compiled successfully in 18256ms

                                                       Asset       Size  Chunks                    Chunk Names
            card-hearts.png?392dc5c8f6c2ee406110c25e22cd0bcd    40.6 kB          [emitted]
       /fonts/mail-blue.svg?bc84b03ef6f60ad5847ba4f67a80f27f    2.05 kB          [emitted]
       /fonts/bell-blue.svg?8096fbd35076c0a5e7a3adba18025bf4    1.51 kB          [emitted]
      /fonts/bell-white.svg?b25e2fc0083a5f8da82b8e2516d4e3f5    1.51 kB          [emitted]
      /fonts/heart-blue.svg?164988367535dc90f5ca8c6d2c721612  411 bytes          [emitted]
       /fonts/heart-red.svg?1f2a77a142f5f466c1bad0ac79ad5839  411 bytes          [emitted]
     /fonts/heart-white.svg?d32d3516d55ed96b72307328de98a07d  357 bytes          [emitted]
      /fonts/mail-white.svg?5ae85dd9e3f64d77077f16e3d94757b0    1.81 kB          [emitted]
         /fonts/padlock.svg?a84865217e26a16972dc64bbed0b4cdb    1.17 kB          [emitted]
     /fonts/warning-red.svg?05c10db7ec87e81b17d9659d58e9a0d5    1.04 kB          [emitted]
/fonts/laravel-logo-blue.svg?53c8c0e0b26f0b7afaecb068c40a6b2c    2.95 kB          [emitted]
     /fonts/laravel-logo.svg?aa5a6277a07b394e8a91cb85b657a494    2.95 kB          [emitted]
               homepage.jpg?2898dbffe90ac50008fc371cb398bf6a     716 kB          [emitted]  [big]
           help_photo_1.jpg?26e962eae7b0d14220f12f358c65c47a    29.3 kB          [emitted]
           help_photo_2.jpg?f106524c7bf8dd1e002be6bb96d7bf88      32 kB          [emitted]
           help_photo_3.jpg?b2ed4560611c45313aa743b9a65b5cae    27.4 kB          [emitted]
           help_photo_4.jpg?7169aa0c8cbc59330f01db5c1c592452    32.1 kB          [emitted]
           help_photo_5.jpg?455a1757d83496140cc8be0af9e72e70    33.7 kB          [emitted]
           help_photo_6.jpg?455a1757d83496140cc8be0af9e72e70    33.7 kB          [emitted]
                                                  \js\app.js    1.13 MB       0  [emitted]  [big]  app
                                                \css\app.css     820 kB       0  [emitted]  [big]  app
                                           mix-manifest.json   74 bytes          [emitted]

This files are already present on the public/img/ folder in different location. And I don't know why it put some svg on the fonts folder that do not exist :S

Olixr
Olixr
1 year ago (34,800 XP)

@Xation can you share your webpack.mix.js file?

Perhaps somewhere in your configuration your importing a font it seems. Check the bootstrap.js file if your still using that as well.

I know by default Laravel imported a font or two.

Xation
Xation
1 year ago (14,380 XP)

@Olixr The webpack.mix.js is out of the box.

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

// Full API
// mix.js(src, output);
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);
// mix.combine(files, destination);
// mix.copy(from, to);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public'); <-- Useful for Node apps.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.

And my bootstrap.js

/**
 * Vendor
 */
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

window.Vue = Vue;
Vue.use(VueRouter);

window.axios = axios;
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
 };

 window.$ = window.jQuery = require('jquery'),
 require('jquery-ui'),
 require('jquery-ui/ui/widgets/sortable');
 $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
 });

 require('blueimp-file-upload');
 require('cloudinary-jquery-file-upload');
 require('featherlight');
 require('autonumeric');
 require('toastr');
 require('./components/vendor/featherlight.gallery.js');
 require('./components/vendor/jquery.ui.touchpunch.js');
 require('./components/vendor/jquery.payment.js');

/**
 * App
 */
 window.Funcs    = require('./components/funcs.js');
 window.Card     = require('./components/card.js');
 window.User     = require('./components/user.js');
 window.Pay      = require('./components/pay.js');
 window.Form     = require('./components/form.js');
 window.Item     = require('./components/item.js');
 window.Nav      = require('./components/nav.js');
 window.Polyfill = require('./components/polyfill.js');
 window.Modal    = require('./components/modal.js');
 window.Notif    = require('./components/notif.js');

I begin to switch from Jquery to Vuejs.

Please sign in or create an account to participate in this conversation.