Nativescript-cli: SASS nativeScript livesync result in an infinite deploy loop

[NickIliev]

_From @RadouaneRoufid on February 20, 2018 10:2_

Tell us about the problem

While running NativeScript app, modifiying a scss file result in an infinite deploy loop.

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 3.4.0
• Cross-platform modules: 3.4.0
• Android Runtime: 3.4.1

Please tell us how to recreate the issue in as much detail as possible.

1- Create a basic NativeScript app
2- Create a sass file: _app-common.scss
3- Create another sass file that imports the _app-common.scss: app.android.scss
@import 'app-common';
4- Start NS : tns run android
5- Make a change in _app-common.scss

This results to an infinite loop:

Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/env-prepare.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Executing before-prepareJSApp hook from /home/project/nativescript/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-android-snapshot.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-sass.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-webpack.js
Successfully transferred _app-common.scss.
Refreshing application...
JS: NSModuleFactoryLoader is deprecated! You no longer need to provide it as a module loader.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 51477


Successfully synced application com.domain.project on device emulator-5554.
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/env-prepare.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Executing before-prepareJSApp hook from /home/project/nativescript/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-android-snapshot.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-sass.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-webpack.js
ActivityManager: Start proc 8391:com.domain.project/u0a67 for activity com.domain.project/com.tns.NativeScriptActivity
Successfully transferred all files.
Refreshing application...
JS: NSModuleFactoryLoader is deprecated! You no longer need to provide it as a module loader.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 2510
Successfully synced application com.domain.project on device emulator-5554.
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/env-prepare.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Executing before-prepareJSApp hook from /home/project/nativescript/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-android-snapshot.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-sass.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-webpack.js


JS: NSModuleFactoryLoader is deprecated! You no longer need to provide it as a module loader.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 3632


Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Refreshing application...
JS: NSModuleFactoryLoader is deprecated! You no longer need to provide it as a module loader.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 5904
Successfully synced application com.domain.project on device emulator-5554.
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/env-prepare.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Executing before-prepareJSApp hook from /home/project/nativescript/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-android-snapshot.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-sass.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-webpack.js


Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Refreshing application...
JS: NSModuleFactoryLoader is deprecated! You no longer need to provide it as a module loader.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 8040
Successfully synced application com.domain.project on device emulator-5554.
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/env-prepare.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Executing before-prepareJSApp hook from /home/project/nativescript/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-android-snapshot.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-sass.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-webpack.js


Successfully transferred app.css.
Successfully transferred app.css.
Refreshing application...
JS: NSModuleFactoryLoader is deprecated! You no longer need to provide it as a module loader.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 10054
Successfully synced application com.domain.project on device emulator-5554.
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/env-prepare.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Executing before-prepareJSApp hook from /home/project/nativescript/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-android-snapshot.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-sass.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-webpack.js


Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Refreshing application...
JS: NSModuleFactoryLoader is deprecated! You no longer need to provide it as a module loader.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 12166
Successfully synced application com.domain.project on device emulator-5554.
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/env-prepare.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Executing before-prepare hook from /home/project/nativescript/hooks/before-prepare/nativescript-dev-typescript.js
Preparing project...
Executing before-prepareJSApp hook from /home/project/nativescript/hooks/before-prepareJSApp/nativescript-dev-webpack.js
^CProject successfully prepared (Android)
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-android-snapshot.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-sass.js
Executing after-prepare hook from /home/project/nativescript/hooks/after-prepare/nativescript-dev-webpack.js


^CSuccessfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Successfully transferred app.css.
Refreshing application...

Thank you

_Copied from original issue: NativeScript/NativeScript#5442_

[jogboms]

@RadouaneRoufid can you confirm if you don't have multiple instances of node-sass running? I had a similar issue then whenever the lifesync crashes. It leaves behind a zombie process.

[RadouaneRoufid]

$ ps -aux | grep sass
user    4221  4.9  0.3 1221732 50436 pts/0   Sl+  11:06  11:16 node-sass
user   11047  0.0  0.0  14568   976 pts/5    R+   14:52   0:00 grep --color=auto sass

The problem occurs with only one instance of node-sassrunning.

[hosikiti]

@NickIliev I'm not sure if it's related but I had a similar infinite loop issue with node-sass. So I sent a pull request of node-sass-chokidar version of this SASS plugin which works correctly.

https://github.com/NativeScript/nativescript-dev-sass/issues/53

[RadouaneRoufid]

I was using "nativescript-dev-sass": "^1.1.1" . I upgraded to 1.3.5but it didn't solve the problem.

[noordw]

I am also having the same problem with Android or IOS

[Fatme]

Hi @RadouaneRoufid, @noordw, @hosikiti, @jogboms

This should be fixed in latest version of {N} and nativescript-dev-sass plugin. Can you please update them and try it on your side?

npm i -g nativescript@latest

Go to your project folder and execute:

npm i --save-dev nativescript-dev-sass@latest
rm -rf node_modules
npm i