Laravel-mix: New `mix.js` file

[tillkruss]

What exactly is the the new mix.js file used for? Do I need it? Can I turn it off?

webpackJsonp([6],{

/***/ 113:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 114:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 115:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 116:
/***/ (function(module, exports) {



/***/ }),

/***/ 320:
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(116);
__webpack_require__(114);
__webpack_require__(115);
module.exports = __webpack_require__(113);


/***/ })

},[320]);

[JeffreyWay]

We use that as a placeholder when you don't make any call to mix.js() in your webpack.mix.js file.

If you're on the latest version of Mix, it should automatically delete that file for you after Webpack compiles.

[tillkruss]

Thanks for the details! File is not deleted for me on 0.10.0.

[arcanedev-maroc]

Hi @JeffreyWay, i've the same issue while using [email protected] on a Windows (8.1) machine.

npm run dev

npm run prod

These are my webpack.mix.js & package.json files.

Best regards 👍

[JeffreyWay]

@arcanedev-maroc Can you paste in your webpack.mix.js file?

[arcanedev-maroc]

Yeah no problem

const { mix } = require('laravel-mix');

const publicFolder  = 'public';
const publicFolders = {
    fonts: publicFolder + '/assets/fonts',
    images: publicFolder + '/assets/img',
    scripts: publicFolder + '/assets/js',
    svg: publicFolder + '/assets/svg'
};

mix.disableNotifications();
// mix.sourceMaps();
// mix.version();
mix.setPublicPath(publicFolder);

// Styles
//-------------------------------------------------------

mix.sass('resources/assets/front/sass/app.scss', '/assets/css')
    .options({ processCssUrls: false });

mix.sass('resources/assets/back/sass/admin.scss', '/assets/css')
    .options({ processCssUrls: false });

// Scripts
//-------------------------------------------------------
mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery']
});

mix.js('resources/assets/front/js/app.js', '/assets/js');
mix.js('resources/assets/back/js/admin.js', '/assets/js');
mix.extract([
   'axios', 'vue', 'jquery', 'bootstrap-sass', 'lodash', 'chart.js', 'simplemde', 'dropzone',
   'eonasdan-bootstrap-datetimepicker', 'jquery-slimscroll', 'select2', 'js-cookie', 'fastclick'
], '/assets/js/vendors.js');

mix.copy('node_modules/pace-progress/pace.min.js', publicFolders.scripts + '/vendors/pace.min.js');

// Fonts
//-------------------------------------------------------
mix.copy([
    'node_modules/bootstrap-sass/assets/fonts/bootstrap',
    'node_modules/font-awesome/fonts',
    'node_modules/ionicons/dist/fonts',
    'node_modules/weathericons/font',
    'resources/assets/back/fonts',
], publicFolders.fonts);

// Images
//-------------------------------------------------------

mix.copy('node_modules/bootstrap-colorpicker/dist/img/bootstrap-colorpicker', publicFolders.images + '/bootstrap-colorpicker');
mix.copy('node_modules/ion-rangeslider/img', publicFolders.images + '/ion-rangeslider');
mix.copy('resources/assets/back/img', publicFolders.images);

// SVG
//-------------------------------------------------------

mix.copy('node_modules/flag-icon-css/flags', publicFolders.svg + '/flags');

This is the whole project if you want to test it out: ARCANESOFT/ARCANESOFT - develop branch

You can also find yarn.lock to check the installed packages.

[arcanedev-maroc]

Hi @tillkruss, can you specify wich OS you're using ?

I'm using Windows 8.1

[tillkruss]

Latest macOS.

[sweetroll]

This issue is still in 0.11.4 but seems to disappear if the js config is put above the sass.

[jonathanpmartins]

thanks @sweetroll this solved my problem!

[arcanedev-maroc]

Hi @JeffreyWay, the @sweetroll's answer solves the issue.

I switched the order and it works !!

// This is an other project :)

const { mix } = require('laravel-mix');

//...

// Scripts
//-------------------------------------------------------

mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery']
});

mix.js('resources/assets/js/app.js', '/assets/js');

mix.extract([
    // Common dependencies
    'axios', 'vue', 'jquery', 'bootstrap-sass', 'lodash'
], '/assets/js/vendors.js');

// Styles
//-------------------------------------------------------

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

//...

Thank a lot @sweetroll

[codexp]

"/mix.js" is still present in "mix-manifest.json" even though no js scripts are being compiled

[zishanj]

In my case, I am using latest laravel-mix version 1.3. My mix.js file is automatically deleted as mentioned by @JeffreyWay but then it throws the error:

Error: ENOENT: no such file or directory, open '/src/app/public/js/mix.js'
at Error (native)
at Object.fs.openSync (fs.js:641:18)
at Object.fs.readFileSync (fs.js:509:33)
at File.read (/src/node_modules/laravel-mix/src/File.js:180:19)
at File.version (/src/node_modules/laravel-mix/src/File.js:190:25)
at Manifest.hash (/src/node_modules/laravel-mix/src/Manifest.js:55:65)

and I can see entry of mix.js file in mix-manifest.json file but the file is automatically deleted.