Mix is compiling to empty js file

Hi @torch

When you say

After some while

Do you mean that you run npm run dev and then it complains, or does it complain just out of the blue?

To avoid any funny browser cache issues make sure to add at the end of your webpack file .version()

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

mix.js('resources/js/app.js', 'public/js/app.js')
   .less('resources/less/app.less', 'public/css/app.css')
   .version()

This will create new file for each compile and reference it from your blade like so:

<link rel="stylesheet" type="text/css" href="{{ mix('/css/app.css') }}">
<script src="{{ mix('/js/app.js') }}"></script>

That way you are busting cache each time you build your files.

Try if this will work.

Hi @aurawindsurfing,

thank you for the answer. Yes I tried npm run dev, npm run watch, npm run production all same.

Mix does not display any error in CLI... it just emit the output normally as if everything was OK, even the size is there displayed as you can see, but the physical javascript file is empty.

.version() does not help, it is behaving the same with it.

This is not issue of cache of browser, I think it is some weird windows/virtual/file permissions problem connected with webpack (or maybe something completely different)

More info: I have to restart whole PC to solve the issue (then it works OK for a while, and boom out of the blue the issue happen again) reloading homestead/vagrant does not help

you have to include the script in your main.blade.php otherwise it gives error,

 <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="{{ mix('js/app.js') }}"></script>

@MUNAZZIL - That's not the issue here. OP is saying the file is empty. Including it isn't going to make a difference.

Try a couple things:

1. Double check the file browser to make sure it's not just Windows playing games on you (I've had that before lol)

2. Try removing and re-installing mix/node etc.

@torch remove completely:

public/js/app.js
public/css/app.css

run npm run dev

Check if it created:

public/js/app.js
public/css/app.css

Are they empty files?

Thank you guys for ideas,

but neither worked :/

The file is really empty, i checked in browser directly. Deleting files also does not help, mix just creates new empty file.

Just reminder, I do not have problems with css, it is working correctly all the time. Problem is only with javascript.

I reinstalled node, did not help. I will try to reinstall mix, but this I don't want to do, as this means reinstalling all node_modules (if I understand correctly) and I had problems installing it in the first place

Yes i am also faced similar problem and i have include below cdn then it works for me perfectly,

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

after that check with below command in CMD to changes you have made,

    php artisan serve

Hi @munazzil ,

thanks, but I think it is not the same issue. I tried to include the file, but the output file by mix is still empty

You'll no doubt have issues installing node modules on Windows. It's always been like that.

Usually using yarn with --no-bin-links will resolve the issue of installing node_modules again.

@munazzil Once again, it's not related. We're talking about Laravel Mix compiling JavaScript, not Vue

@torch do you run the command inside your homestead or native on win 10?

Are you using dynamic imports with vue files? This could be the issue.

@marcorieser I am running it inside homestead

@jaytee no I am not using dynamic imports, or vue at all

Edit: I just tried again today after reboot... it worked 2 times i ran npm run dev... 3rd time it built empty js (before it at least last 2 weeks before the issue happen not after 2 compilations!!)

I am getting really furious

Shouldn't make a difference, but can you show us your app.js file and any other files like bootstrap.js please.

Try update laravel mix. Package.json might be referencing 4.0.7 but node_modules may actually have a older version. 4.0.7 fixed compiling issues on windows, so it's possible that you're actually on a lower version, and it just didn't update. Best way to do it is remove laravel mix and re-install. Refer to the commands above that I posted if it fails to install.

So I reinstalled everything (node_modules), Laravel Mix is up to date. No change.... issue still persists

app.js

require('./bootstrap');
require('./init');
require('./landing');
require('./wizzards');
require('./stream');
require('./profiles');
require('./search');
require('./grids');
require('./settings');
require('./manager');
require('./exams');
require('./shows');
require('./litters');
require('./messages');
require('./dogs');

all these required files are just javascript + some jquery

My bootstrap.js is empty right now

Well.... as I suspected the problem is with filesystem. When NFS is active in homestead virtual it is not working:

In homestead.yaml

      type: "nfs"

is the problem. If I remove it, everything started working again like a charm

So, now the task is to figure out why NFS is making these troubles

Try looking at this here: https://laravel-mix.com/docs/4.0/faq

under the second FAQ question about minification. See if that will fix it with nfs

@jaytee I don't knwo what exactly do you mean... to set NODE_ENV to development?

I have found some solution in google just include your path similar like below according to your resources,

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

mix

 .js('resources/assets/js/app.js', 'public/js/app.js')
 .js('resources/assets/js/bootstrap.js', 'public/js/app.js')
 .js('resources/assets/js/plugins/jquery.appear.js', 'public/js/plugins/jquery.appear.js')
 .js('resources/assets/js/plugins/jquery.backstretch.min.js', 'public/js/plugins/jquery.backstretch.min.js')
 .js('resources/assets/js/plugins/modernizr.js', 'public/js/plugins/modernizr.js')    

.combine([        
'resources/assets/js/libs/app.js',
'resources/assets/js/libs/bootstrap.js',
'resources/assets/js/libs/custom.js',
'resources/assets/js/libs/gmap.js',
'resources/assets/js/libs/ipad.js',
'resources/assets/js/libs/jquery.form.min.js',
'resources/assets/js/libs/jquery.min.js',
'resources/assets/js/libs/jquery.pjax.js',
'resources/assets/js/libs/jquery.slim.min.js',
'resources/assets/js/libs/myform.js',
'resources/assets/js/libs/sb-admin-2.js',
'resources/assets/js/libs/sb-admin-2.min.js',
'resources/assets/js/libs/sticky.js',
'resources/assets/js/libs/template.js',], 'public/js/libs/libs.js')
.js('resources/assets/js/isotope/isotope.pkgd.min.js', 'public/js/plugins/isotope/isotope.pkgd.min.js')
.sass('resources/assets/sass/app.scss', 'public/css/lib.css')
.version();

@torch Sorry, not under minification. This one here: https://laravel-mix.com/docs/4.0/faq#im-using-a-vm-and-webpack-isnt-picking-up-my-file-changes

@munazzil That doesn't solve the problem. It's to do with NFS. Please, stop posting things that are irrelevant to the question. I understand you're new the forum and you want to help contribute, but contributing to questions with irrelevant answers doesn't help, and gets in the way of helping the original poster.

To make sure you're on topic, the issue here is using mix.js() with Laravel's Homestead and NFS file system on the Windows Operating System. Combining some files may work, but compiling files that need to run through webpack won't.

@jaytee What you mean by new to the forum if you were three year in this forum means you have much experience in old stuffs but according to the new stuff we could same experience but approach to question is different. Can you justify your statement if i am less experience , then your experience could help him out but unfortunately he was stuck for two days try to provide him a solution rather than talking about experience.I have given answer whatever i have faced problem while implementing project if it is help him out that is glade to me JackaThompson.

@jaytee that did not solve the issue also (i was using watch-poll before and fsnotify did not help)

@munazzil I am sorry man, but jaytee is right. The problem I am facing is somehow different in nature from your proposed solution.

Anyway, I turned off NFS and web is running sufficiently fast so I am good for now, but it is indeed a very strange issue. What I find most strange is that with nfs turned on, the js file is compiled OK for 2-3 times when I run MIX, and empty for the 4rd time it is run. That I can not just wrap my head around.

Have you checked laravel error_log? Then it could be the cache error try with below command in your CMD,

   php artisan cache:clear
   php artisan view:clear
   php artisan config:clear

@munazzil Literally once again, irrelevant. This isn't Laravel related, so clearing the cache for Laravel isn't going to make a difference.

@torch Have you got winnfsd installed or vagrant-winnfsd installed? The recommended one to install with Vagrant/Homestead is the vagrant-winnfsd. If you haven't got that installed, give it a shot and remove the regular winnfsd. If you have got it installed, I have a feeling it may be fucking with mix.

https://github.com/winnfsd/vagrant-winnfsd

@jaytee I have vagrant-winnfsd installed.

I have the same project cloned and synchronized on 2 PCs. Only thing that is different as I can see is this homestead config

folders:
    - map: D:\Projects
      to: /home/vagrant/Code
      owner: "vagrant"
      group: "vagrant"
      type: "nfs"
      mount_options: ["nolock,vers=3,udp,noatime,actimeo=1"]

The part:

      owner: "vagrant"
      group: "vagrant"

is not present in the config on PC where mix does work. Later I will try to remove it and let you know the results

I haven't used Homestead in a loooonnnnggg time, I'm so glad I switched too because I used to always have issues with it. On mac, I use valet, and on windows, I now use Laragon (laragon is somewhat similar, it has it's own isolated environment).

So this little b*tch was the problem:

owner: "vagrant"
group: "vagrant"

after deleting it from Homestead.yaml it is working OK again. I don't even know why it was there!

Node and NPM can be a pain just over mounted shares. When going from Windows->Nix it's a lot worse. VagrantWinNFSd just doesn't like the huge number of files from things like node_modules.

For Windows I suggest dropping Homestead. Instead use this:

https://neard.io/

It's a portable WAMP server with tons of features that just works. If you need something that doesn't run on WIndows, like Redis, then just spin up a Docker container for that service.

On the node side of things, Neard comes with it (you don't have to use it and instead can install your own version). I'm working on a client project right now that the admin section is a huge SPA. I've got a bunch of dynamic imports and built in a huge monorepo (Yarn workspaces + Lerna). It builds fast using just Windows and even HMR works great.