Laravel-mix: modify mix-manifest.json before complete versioning on production

Created on 7 May 2017 · 19Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: 0.11.4 (npm list --depth=0)
Node Version 6.10.1
NPM Version 3.10.10
OS: macOS Sierra (10.12.3)

# Description:
I have a lot of JS scripts that should be compiled as CSS too. All the time that we're using laravel-mix in dev environment no problem at all. But, when we launch the application and run the npm run production we found something:

Laravel:

Unable to locate Mix file: /css/all.css. Please check your webpack.mix.js output paths and try again.

The error persists until the command npm run production displays the output after the compilation.

Even with the message DONE Compiled successfully displayed in the console, Laravel was unable to locate the files generated (because they do not exists in the mix-manifest.json yet).

But, when the npm run production was finished and displays the output:

Asset Size Chunks Chunk Names
/js/app.b6aa74e460981f1fae55.js 456 kB 0 [emitted] [big] /js/app
/css/app.206b204034a2b86d253b760ed61af160.css 84 bytes 0 [emitted] /js/app
mix-manifest.json 120 bytes [emitted]

The error was gone and laravel can find the files.

# Steps To Reproduce:

To reproduce follow the steps:

In one terminal tail the mix-manifest.json file running: tail -f mix-manifest.json and let this terminal open
Open another terminal and run the command npm run production and put the other terminal in parallel to look the file (mix-manifest.json) changes in real-time
In my example, the script remove two parameters and only insert them after the command npm run production displays the output.

webpack.mix.js:

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

mix.combine([

 'resources/assets/template/js/core/libraries/jquery.min.js',
    'resources/assets/template/js/core/libraries/jquery.unserialize.js',
    'resources/assets/template/js/core/libraries/bootstrap.min.js',
    'resources/assets/template/js/plugins/loaders/blockui.min.js',
    'resources/assets/libs/jszip-utils.js',
    'resources/assets/libs/FileSaver.js',

    'resources/assets/template/js/core/libraries/jquery_ui/core.min.js',
    'resources/assets/template/js/core/libraries/jquery_ui/effects.min.js',
    'resources/assets/template/js/core/libraries/jquery_ui/interactions.min.js',

    'resources/assets/template/js/plugins/tables/datatables/datatables.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/col_reorder.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/jszip/jszip.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/pdfmake/vfs_fonts.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/buttons.min.js',

    'resources/assets/libs/mask.js',
    'resources/assets/libs/mask.money.js',

    'resources/assets/template/js/plugins/ui/prism.min.js',
    'resources/assets/template/js/plugins/ui/headroom/headroom.min.js',
    'resources/assets/template/js/plugins/ui/headroom/headroom_jquery.min.js',
    'resources/assets/template/js/core/app.js',
    'resources/assets/template/js/pages/navbar_hideable.js',
    'resources/assets/template/js/core/libraries/jquery_ui/interactions.min.js',
    'resources/assets/template/js/plugins/forms/selects/select2.min.js',
    'resources/assets/template/js/plugins/forms/selects/select2.pt-BR.js',
    'resources/assets/template/js/plugins/forms/styling/switch.min.js',
    'resources/assets/template/js/plugins/notifications/pnotify.min.js',

    'resources/assets/template/js/plugins/ui/moment/moment.min.js',
    'resources/assets/template/js/plugins/ui/moment/moment_locales.min.js',
    'resources/assets/template/js/plugins/pickers/daterangepicker.js',
    'resources/assets/template/js/plugins/pickers/jquery.datetimepicker.full.min.js',
    'resources/assets/template/js/plugins/uploaders/fileinput.min.js',
    'resources/assets/template/js/plugins/visualization/echarts/echarts.js',

    'resources/assets/template/js/plugins/export/jquery.base64.js',
    'resources/assets/template/js/plugins/export/tableExport.js',
    'resources/assets/template/js/plugins/export/jspdf/libs/sprintf.js',
    'resources/assets/template/js/plugins/export/jspdf/jspdf.js',
    'resources/assets/template/js/plugins/export/jspdf/libs/base64.js',

    'resources/assets/template/js/plugins/trees/jquery.fancytree.js',
    'resources/assets/template/js/plugins/sweetalert.min.js',
    'resources/assets/template/js/plugins/jquery.fileDownload.js',
    'resources/assets/libs/jquery.print.js'

], 'public/js/vendor.js');

mix.combine([
    'resources/assets/css/datatables.css',
    'resources/assets/css/sweetalert.css',
    'resources/assets/css/jquery.datetimepicker.min.css'
], 'public/css/all.css');

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

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

if (mix.config.inProduction) {
    mix.version();
}`

Source

rodolphovfreire

Most helpful comment

My fix for this issue was:

webpack.mix.js

````js
// beginning of the file
let fs = require('fs');

Mix.manifest.name = 'mix-manifest-new.json';

// end of the file
mix.then(function () {
fs.renameSync('./public/mix-manifest-new.json', './public/mix-manifest.json')
})
````

dbpolito on 20 Sep 2017

👍2

All 19 comments

mix.combine([
    'resources/assets/css/datatables.css',
    'resources/assets/css/sweetalert.css',
    'resources/assets/css/jquery.datetimepicker.min.css'
], 'public/css/all.css');

This whole chunk here,

try using mix.styles() instead of mix.combine()

ruchern-chong on 7 May 2017

@ruchern thanks for the short reply.

But the error stills... :/

JSON before npm run production:

javascript{
"/js/app.js": "/js/app.b6aa74e460981f1fae55.js",
"/css/app.css": "/css/app.206b204034a2b86d253b760ed61af160.css",
"/js/vendor.js": "/js/vendor.8b40dc7a0ce24288e2df091a97c1bf7d.js",
"/css/all.css": "/css/all.b87f46f70057a21913dbce73aaf93a2d.css"
}

JSON during the npm run production:

{
"/js/app.js": "/js/app.b6aa74e460981f1fae55.js",
"/css/app.css": "/css/app.206b204034a2b86d253b760ed61af160.css",
"/js/vendor.js": "/js/vendor.8b40dc7a0ce24288e2df091a97c1bf7d.js"
}

JSON after the npm run production displays the outputs:

{
"/js/app.js": "/js/app.b6aa74e460981f1fae55.js",
"/css/app.css": "/css/app.206b204034a2b86d253b760ed61af160.css",
"/js/vendor.js": "/js/vendor.8b40dc7a0ce24288e2df091a97c1bf7d.js",
"/css/all.css": "/css/all.b87f46f70057a21913dbce73aaf93a2d.css"
}

As you can see, during the npm run production it removes the "/css/all.css": "/css/all.b87f46f70057a21913dbce73aaf93a2d.css" inside the mix-manifest.json so Laravel can not find it. But, when the command displays the output, the file can be found.

rodolphovfreire on 7 May 2017

Can you try removing mix.combine() with the whole long chunk of javascript files? Use mix.scripts() instead.

I'm just narrowing down the errors by conforming configurations to Laravel's documentation.

ruchern-chong on 7 May 2017

@ruchern thank you again for your fast reply.

Yes, i do replace the mix.combine() for mix.scripts() for the JS and mix.styles for the CSS.

webpack.mix.js:
== changed ==

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

mix.scripts([
    'resources/assets/template/js/core/libraries/jquery.min.js',
    'resources/assets/template/js/core/libraries/jquery.unserialize.js',
    'resources/assets/template/js/core/libraries/bootstrap.min.js',
    'resources/assets/template/js/plugins/loaders/blockui.min.js',
    'resources/assets/libs/jszip-utils.js',
    'resources/assets/libs/FileSaver.js',

    'resources/assets/template/js/core/libraries/jquery_ui/core.min.js',
    'resources/assets/template/js/core/libraries/jquery_ui/effects.min.js',
    'resources/assets/template/js/core/libraries/jquery_ui/interactions.min.js',

    'resources/assets/template/js/plugins/tables/datatables/datatables.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/col_reorder.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/pdfmake/pdfmake.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/jszip/jszip.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/pdfmake/vfs_fonts.min.js',
    'resources/assets/template/js/plugins/tables/datatables/extensions/buttons.min.js',

    'resources/assets/libs/mask.js',
    'resources/assets/libs/mask.money.js',

    'resources/assets/template/js/plugins/ui/prism.min.js',
    'resources/assets/template/js/plugins/ui/headroom/headroom.min.js',
    'resources/assets/template/js/plugins/ui/headroom/headroom_jquery.min.js',
    'resources/assets/template/js/core/app.js',
    'resources/assets/template/js/pages/navbar_hideable.js',
    'resources/assets/template/js/core/libraries/jquery_ui/interactions.min.js',
    'resources/assets/template/js/plugins/forms/selects/select2.min.js',
    'resources/assets/template/js/plugins/forms/selects/select2.pt-BR.js',
    'resources/assets/template/js/plugins/forms/styling/switch.min.js',
    'resources/assets/template/js/plugins/notifications/pnotify.min.js',

    'resources/assets/template/js/plugins/ui/moment/moment.min.js',
    'resources/assets/template/js/plugins/ui/moment/moment_locales.min.js',
    'resources/assets/template/js/plugins/pickers/daterangepicker.js',
    'resources/assets/template/js/plugins/pickers/jquery.datetimepicker.full.min.js',
    'resources/assets/template/js/plugins/uploaders/fileinput.min.js',
    'resources/assets/template/js/plugins/visualization/echarts/echarts.js',

    'resources/assets/template/js/plugins/export/jquery.base64.js',
    'resources/assets/template/js/plugins/export/tableExport.js',
    'resources/assets/template/js/plugins/export/jspdf/libs/sprintf.js',
    'resources/assets/template/js/plugins/export/jspdf/jspdf.js',
    'resources/assets/template/js/plugins/export/jspdf/libs/base64.js',

    'resources/assets/template/js/plugins/trees/jquery.fancytree.js',
    'resources/assets/template/js/plugins/sweetalert.min.js',
    'resources/assets/template/js/plugins/jquery.fileDownload.js',
    'resources/assets/libs/jquery.print.js'

], 'public/js/vendor.js');

mix.styles([
    'resources/assets/css/datatables.css',
    'resources/assets/css/sweetalert.css',
    'resources/assets/css/jquery.datetimepicker.min.css'
], 'public/css/all.css');

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

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

if (mix.config.inProduction) {
    mix.version();
}

rodolphovfreire on 7 May 2017

Still did not work?

ruchern-chong on 7 May 2017

Unfortunately, not...

If you can do these steps below you can reproduce the issue:

Lauch one laravel application (NGINX or php artisan serve);
Run npm run production
Go to browser and press F5 (reload page) repeatedly white the npm run production is running...

You should see the issue :)...

rodolphovfreire on 7 May 2017

Why do you need to run php artisan serve on macOS?

Just install Laravel Valet. It is better.

I do not have this problem. I am running productions on my local and production environment the cache-busting version function is working fine.

And I am using Laravel Valet for local development. On production I am using Apache, I never had to run php artisan serve.

ruchern-chong on 7 May 2017

Oh, it's just to exemplify for you on how to reproduce the issue. macOS is my development SO and in production I am using CentOS 7 + NGINX. Could you run the npm run production in your production machine and repeatedly F5 (reload) the page white the npm run production is running?

Oh, thanks one more time...

rodolphovfreire on 7 May 2017

Yup, I have no problem at all. I am running Ubuntu + Apache2 on production if that helps.

ruchern-chong on 7 May 2017

Do you follow the steps I mentioned above?

In one terminal tail the mix-manifest.json file running: tail -f mix-manifest.json and let this terminal open
Open another terminal and run the command npm run production and put the other terminal in parallel to look the file (mix-manifest.json) changes in real-time

I think it could be related to file size, look:

My JS file after the production command results in:

/js/app.b6aa74e460981f1fae55.js 456 kB 0
[emitted] [big] /js/app

If you can follow the steps above you will see that the command npm run production touch the mix-manifest.json after complete the compiled AND after displays the output. What I'm saying is that the command modify the mix-manifest.json two times.

Hope you can reproduce the issue :)...

rodolphovfreire on 7 May 2017

@rodolphovfreire I hope this proves that I am not facing any problem.

screen shot 2017-05-07 at 10 17 22 pm

ruchern-chong on 7 May 2017

@ruchern thanks for your fast reply...

Yeah, you're not facing any problem :/...

I really don't know why this is happening in my project.

tail-f

rodolphovfreire on 7 May 2017

You got a warning, not sure if that is related.

ruchern-chong on 8 May 2017

I'm seeing this problem too on latest laravel-mix...

I also see it updates the mix-manifest.json twice, in my case first it generates a mix only with js and scss tasks, and then it generates the complete one with the combine and copy.

In my case this time window means +10 seconds, which basically shows this error.

dbpolito on 13 Sep 2017

👍1

@dbpolito I had to write a new code to bypass this issue. Load all the files in a different folder and after the process has been completed it replaces the old mix-manifest.json. That's the only way I've found to bypass this.

rodolphovfreire on 13 Sep 2017

I'm thinking in dynamically changing this for now

https://github.com/JeffreyWay/laravel-mix/blob/434f9d8d768cd8848f343043d0e4bd16eef13849/src/Manifest.js#L12-L15

something like:

mix.manifest.name = 'mix-manifest-new.json';

And add a job after the entire build is done to just rename this file to the new file... I will post my results after i try.

dbpolito on 13 Sep 2017

My fix for this issue was:

webpack.mix.js

````js
// beginning of the file
let fs = require('fs');

Mix.manifest.name = 'mix-manifest-new.json';

// end of the file
mix.then(function () {
fs.renameSync('./public/mix-manifest-new.json', './public/mix-manifest.json')
})
````

dbpolito on 20 Sep 2017

👍2

@dbpolito very thanks.

paulocastellano on 9 Feb 2019

@dbpolito save my life, thank you

whosphp on 26 Sep 2019

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Cannot emit CSS files from sass and less in same build

mstralka · 3Comments

Refreshing styles with "npm run hot" and sass

Bomavi · 3Comments

hmr in windows dosnt work in 0.8.9

kpilard · 3Comments

A directory with subdirectories is flattened when copied

sdebacker · 3Comments

Laravel-mix & common chuncks plugin

mementoneli · 3Comments