Laravel-mix: Javascript File Deleted After SCSS Change

[kevin-coyle]

• Laravel Mix Version: 0.12.1
• Node Version: 6.9.5
• NPM Version: 3.10.10
• OS: OS X 10.12

Description:

After initial compilation when changing a SCSS file in a build that contains only scss and js then when the scss is changed the JS is deleted.

Steps To Reproduce:

On OSX follow these instructions:

#Create a temp project
mkdir /tmp/jsbug
cd /tmp/jsbug
#Create a default package.json
npm init -y
npm install lavavel-mix --save-dev
cp -r node_modules/laravel-mix/setup/** ./
touch style.scss
touch app.js

Copy in the lines to the package.json like in the documentation

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

Edit the webpack.mix.js file to contain for the jobs:

let mix = require('laravel-mix');
mix.js('app.js', 'dist/')
.sass('style.scss', 'dist/');

Now run npm run watch

Initially this will create the javascript file. Then edit the sass file. The javascript file is then deleted.

In addition an example github repo is here:

https://github.com/kevin-coyle/laravel-mix-bug

Thanks for any help that you can give.

[ingria]

I have the exact same problem with 0.12.1

[njbarrett]

I've got this problem as well on 0.12.1. The issue does not occur in 0.11.4

[ankurk91]

Unfortunately I could not reproduce this issue.

• Laravel mix : 0.12.1
• npm: 3.10
• node: 6.10
• OS: Ubuntu 16.04 x64

Here is my webpack.mix.js code -

'use strict';
const mix = require('laravel-mix');
const buildDir = 'public/';

mix.js('./resources/assets/js/app.js', buildDir + 'js/app.js')
  .extract([
    'jquery',
    'querystring',
    'lodash',
    'axios',
    'messg',
    'vue-router',
    'vue-nprogress',
    'vue-infinite-loading',
    'vue-select',
    'flatpickr',
    'vue',
    'moment',
    'fullcalendar',
    'bootstrap'
  ])
  .autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
    vue: ['window.Vue', 'Vue'],
    axios: ['window.axios', 'axios'],
    moment: ['window.moment', 'moment'],
    messg: ['window.messg', 'messg'],
  })
  .styles(['./resources/assets/css/app.css'], buildDir + 'css/app.css')
  .sass('./resources/assets/css/vendor.scss', buildDir + 'css/vendor.css')
  .version()
  .sourceMaps(false);

[Sunappnio]

I have the same problem.
When I run "npm run watch", everything works fine
However when I change scss file, only css compiles,
and the js file results on a 404 status

[huubk]

I've got the same issue with 0.12.1

[xenonthong]

Same issue here as well.

[essaaam]

I've the same issue

[filljoyner]

Same issue here using Laravel Mix as a stand-alone.
npm run watch will compile css and js perfectly on startup. Then any updates to scss will remove the compiled js file and only recompile the scss file.

I'm on a PC (Win 10). Anyone else?

[jackmcdade]

Having this when using as stand-alone as well. Using Valet.

[jackmcdade]

As in #843, rolling back to 0.11.4 gets this working again for now.

[filljoyner]

Running 0.11.4 produces same issue for me. :(

[JeffreyWay]

I'm thinking this is already fixed in the 1.0 beta release. But just to be sure...

Is this happening within your Laravel projects? Or is it always in standalone projects that this occurs?

[jackmcdade]

I haven't tried it in a Laravel project yet, just doing some front-end dev outside before i bring it into a legacy app.

[filljoyner]

Same. (as in same as Jack)

[JeffreyWay]

Ah okay, good to know thanks.

Mix 1.0 will automatically fix this. I'll be tagging it later this week.

[huubk]

Haven't tried this in Laravel yet only standalone..

[filljoyner]

Did a quick test with clean install of Laravel. Working fine there.

[essaaam]

I did update to laravel mix 1.0.3 but I'm still have the same issue

[JeffreyWay]

@EssamWD I doubt it. We don't delete any files in the 1.0 version. Can you run npm list --depth=0 and make sure that it says 1.0.3 for laravel-mix?

[essaaam]

I removed the package and install it again and now everything work very well.. Thank you very much