laravel-mix scripts and files changes not watched

[Okipa]

• Laravel Mix Version : 0.8.4
• Node Version (node -v) : 7.6.0
• NPM Version (npm -v) : 4.2.0
• OS: MacOS Sierra 10.12.3

Description:

I only use laravel-mix to copy, concat, minify and version my assets and everything is working fine when I launch commands like npm run dev or npm run production.
I use the mix.copy, mix.sass, mix.scripts and mix.version (only for production) features of laravel-mix.

When I used the watch feature with elixir, sass changes, scripts sheet changes and file changes were detected and triggered a task execution.
With laravel-mix, sass sheets changes are well detected but scripts sheets changes are not and neither files ones.

Is this a normal behaviour and is there a way to track scripts sheets changes and files changes ?

Steps To Reproduce:

npm run watch
or
npm run watch-poll

[JeffreyWay]

I can't seem to reproduce this. I didn't fully understand this part:

but scripts sheets changes are not and neither files ones.

I created a test webpack.mix.js file that compiles Sass, concatenates scripts, and copies a file to a new location. Each time I changed the related source file, the file change was picked up.

Can you give me exact reproducible steps?

[Okipa]

My webpack.mix.js is written like the example bellow :

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

// images
mix.copy( 'resources/assets/img/flag', 'public/img//flag');

// fonts
mix.copy('resources/assets/fonts/lato', 'public/fonts/lato');

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

// scripts
mix.scripts([
  // resources scripts import
  'resources/assets/vendor/jquery/dist/jquery.js',
  'resources/assets/vendor/jquery.easing/js/jquery.easing.js',
  'resources/assets/vendor/bootstrap-sass/assets/ javascripts/bootstrap.js',
  'resources/assets/js/common/ie10-viewport-bug-workaround.js',
  // added scripts import
  'resources/assets/js/common/app.common.js',
  'resources/assets/js/front/app.front.js'
], 'public/js/app.front.js');

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

STEPS AFTER LAUNCHING npm run watch :

1. Adding an image in the resources/assets/img/flag directory => OK
2. Adding a font in the resources/assets/fonts/lato directory => OK
3. Updating the sass file => OK
4. Updating one of my js script sheet (app.front.js for example) => NOK

The watch does not detect the change on my app.front.js file.

EDIT :
I realized that I was making my calls like bellow for the mix.copy feature :

mix.copy('resources/assets/fonts/**/*', 'public/fonts');

I did that in order to recreate all the source directory architecture in the destination directory but :

1. the source directory architecture was not recreated in the destination
2. the watch did not work for this source directory

Any clue on how to proceed to recreate a directory architecture with a mix.copy command for example ?

[JeffreyWay]

@Okipa - Hmm, weird. I just created a demo project with:

mix.scripts([
  // resources scripts import
  'resources/assets/vendor/jquery/dist/jquery.js',
  'resources/assets/vendor/jquery.easing/js/jquery.easing.js',
  'resources/assets/vendor/bootstrap-sass/assets/javascripts/bootstrap.js',
  'resources/assets/js/common/ie10-viewport-bug-workaround.js',
  // added scripts import
  'resources/assets/js/common/app.common.js',
  'resources/assets/js/front/app.front.js'
], 'public/js/app.front.js');

If I change any of those files, public/js/app.front.js is immediately updated to reflect the change.

For your mix.copy() question, do:

mix.copy('resources/assets/fonts', 'public/fonts', false);

[Okipa]

I really don't understand for the scripts changes that are not tracked.
I tried to create a test.js file in the resources/assets/js folder.
I comment everything except the following code :

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

mix.scripts([
  'resources/assets/js/front/app.front.js'
], 'public/js/app.front.js');

I launch the npm run watch command.
I add a console.log('test'); line in my test.js file, then I save.
=> nothing happens ....

I'm quite desperate here. Could it be linked to a configuration ?
Here is my package.json :

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack",
    "watch": "npm run dev -- -w",
    "watch-poll": "npm run dev -- -w --watch-poll",
    "hot": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=$npm_package_config_webpack",
    "production": "npm run dev -- -p"
  },
  "config": {
    "webpack": "node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "laravel-mix": "^0.8.4"
  }
}

Anyway, thanks for the false tip, that's what I needed.

[JeffreyWay]

@Okipa Try running this command:

cross-env NODE_ENV=development webpack --progress --hide-modules --watch"

And then change any file in the mix.scripts() array. After the change, you're 100% sure that the public/js/app.front.js file is not updated?

[Okipa]

Yes I am 100% sure that the change is not reported on the file in the public folder. I tried a hundred times without success :(

I have an error when I try your command : cross-env is not found.

command not found: cross-env

[JeffreyWay]

You're not on the latest version of Mix. You can do npm update laravel-mix or npm install cross-env for now.

[Okipa]

It is working since I passed on the v0.8.5.
Thank you for your support !

[sburina]

Just to add my two cents, in case someone stumble upon this issue and can't resolve it even with the newest laravel-mix, webpack, node and npm. Spent the whole day banging my head, and FINALLY:

https://webpack.github.io/docs/troubleshooting.html#file-saves-in-webstorm-don-t-trigger-the-watcher

When using the JetBrains WebStorm IDE, you may find that saving changed files does not trigger the watcher as you might expect. Try disabling the safe write option in the settings, which determines whether files are saved to a temporary location first before the originals are overwritten: uncheck File > Settings... > System Settings > Use "safe write" (save changes to a temporary file first)

Please note: there's no output in the console, but it works - check your resulting files.

[robclancy]

Yeah I thought I actually had this issue because the console doesn't indicate anything happened like with CSS. But checking the compiled code it is updated right away.

[Okipa]

Thanks for the tip Sburina, I am using PhpStorm and that was probably linked to this issue

[FaranAli9]

For me, the problem was solved by moving the project to another directory whose path did not contain spaces or brackets. Previously I was working at:
C:\Program Files (x86)\Ampps\www\project ---- And laravel mix was not watching the files.
I moved my project folder to:
C:\Ampps\www\project ---- and npm run watch started working perfectly fine

[hsleewis]

Same issue here, when compiling with mix.js everything works fine, mix.scripts doesn't see and process changes.

[chris-faulkner]

@sburina Thank you so much, that's exactly what caused my issue. I really couldn't understand how it worked sometimes and not others!

[thibaultvanc]

it works for me after :
sudo sysctl fs.inotify.max_user_watches=32768 in the console
Hope it's help

[yeasir2148]

For me this was even more weird. I added a new method to my component which was supposed to be called when a button was clicked. Surprisingly a different method was being called which was linked to another button on the same component!! I looked into the compiled app.js file and noticed that the new method was there that means the JS files were being watched correctly. Spent hours trying to find the issue. Finally got the changes to reflect in my component after i cleared the cache of chrome(which i did several times) and closed and reopened the project in a new tab!!

Any explanation why this behavior??

[OwenMelbz]

I have also found that it does recompile - but we've got 2 different developers, one windows and one macOS - although it compiles again it doesn't display the notification and the terminal window shows no feedback of this happening either

[phoeni2020]

got similar problem the npm was complies my sass files but with out any change !!!
but i've tried npm update laravel-mix then npm install cross-env then i run it again to compile my files and tadaa IT'S FINALLY WORKS
Laravel 5.8