BIG ISSUE: Infinite SASS compiling on OSX High Sierra

[hosikiti]

Use version 1.3.5 with following latest NativeScript components on OSX High Sierra.

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 3.3.1           │ 3.3.1          │ Up to date    │
│ tns-core-modules │ 3.3.0           │ 3.3.0          │ Up to date    │
│ tns-android      │                 │ 3.3.1          │ Not installed │
│ tns-ios          │ 3.3.0           │ 3.3.0          │ Up to date    │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

When edit .scss file while using tns run ios --emulator, compiling scss to css starts, and as soon as my app runs on emulator, compiling starts again. It doesn't finish and I can stop compiling process only by sending CTRL + C.

We have three developers and two of them who use High Sierra have this issue. Because there is no "infinite compiling issue` on one of our team members, who uses Sierra( not High Sierra ), I think it might be related to something in High Sierra.

Does anyone have any thoughts on how to fix this problem?

[hosikiti]

I found that "gaze", a watcher library used by node-sass, is a cause of this issue. So I tried to use node-sass-chokidar, a thin wrapper of node-sass which uses "chokidar" as a watcher, instead of node-sass and it worked like a charm! Infinite SASS compiling issue has gone. I just have sent a pull request of this fix and hope it will be merged.

[dotnetdreamer]

i have the same issue but i am using High Sierra. I don't know how its happening. Sometimes also its not syncing properly...

[hosikiti]

@dotnetdreamer I'm using High Sierra also. My issue has completely gone since I started using nativescript-dev-sass with node-sass-chokidar I created above.

Speaking of syncing problem, it sometimes happens. LiveSync stops. showing "Refreshing application...". In my environment, I can usually fix it by pushing home button on iOS simulator.

[dotnetdreamer]

@hosikiti it didn't work for me. I saw your pull request and did changes accordingly but i didn't suceed. See the node-sass processes. I have to kill all those and re-start the build process and then it works fine...

i am using High Sierra too.

[hosikiti]

@dotnetdreamer I saw your processlist. I have never seen multiple node-sass processes like yours. Does it happen every time you execute tns run?

[dotnetdreamer]

@hosikiti not every time but most of the time....sometimes reach to 4 processes...but i have to kill all and re-run tns run...

[hosikiti]

@dotnetdreamer Maybe it's worth a try.

at your project root.

tns platform remove ios
tns platform remove android
rm -rf node_modules
npm install

[radeva]

Hi @hosikiti , @dotnetdreamer ,

Could you check if you continue experiencing this is issue with versions 3.4 of NativeScript, modules and runtimes. I'm on High Sierra, npm 5.6, node 8.9.4 and NativeScript dependencies as listed below and cannot reproduce this issue.

All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component │ Current version │ Latest version │ Information │
│ nativescript │ 3.4.0 │ 3.4.0 │ Up to date │
│ tns-core-modules │ 3.4.0 │ 3.4.0 │ Up to date │
│ tns-android │ │ 3.4.0 │ Not installed │
│ tns-ios │ 3.4.0 │ 3.4.0 │ Up to date │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

[jeffswitzer]

I too am seeing this on a brand new macbookpro (high sierra 10.13.2 (17C205)) trying to migrate a nativescript project from my old macbook.

I've freshly installed everything: node (9.4 via nvm), npm, and nativescript.

The app opens in the ios simulator but I do see the following in my console which might be related:

2018-01-19 16:15:39.969454-0700  localhost myapp[2950]: (NativeScript) CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:165:30: Error: Css styling failed: Error: undefined:1:16: missing '{'
Error: Css styling failed: Error: undefined:1:16: missing '{' (/Users/npn/Development/myproject/node_modules/tns-core-modules/trace/trace.js:165:30)

The fans ramp up and when I check the processlist there are ~8 node-sass processes running.
I'm using vs studio code to debug the project.

Don't have the issue with the same project android on my windows 10 box. Here is more version info from my package.json:

tns --version = 3.4.1

"tns-core-modules": "next",
"nativescript-css-loader": "~0.26.1",
    "nativescript-dev-sass": "~1.3.5",
"css-loader": "~0.28.7",
    "sass-loader": "~6.0.6"
"nativescript-platform-css": "^1.6.5",

[chuckmitchell]

I have the same problem as jeffswitzer. I noticed that ios biulds are taking a long time (4-5 minutes) but I haven't traced the source of that slowdown.

CONSOLE ERROR file:///app/tns_modules/tns-core-modules/trace/trace.js:165:30: Error: Css styling failed: Error: undefined:1:16: missing '{'

MacOS 10.13.2 High Sierra

nativescript 3.4.1
tns-core-modules 3.4.0
tns-ios 3.4.1
nativescript-dev-sass 1.3.5

I did notice that my app.css file is empty after compiling the app.scss file when this error occurs.
The strange part for me is this works for a while, then stops working and I lose all my app styling.

[heese]

In another issue they suggested to kill the process node-sass. This broke the endless loop, however, it might have some side effects as they hopefully won't start a process without purpose.
#39

[bzaruk]

have the same thing like @jeffswitzer and @chuckmitchell but I don't have nativescript-dev-sass plugin

[thaoula]

Hi Guys,

Can we please get some guidance on this issue.

I also have the exact same issue on the 3 Mac High Sierra devices. 2 existing and a brand new device.

The symptoms, errors and issues are exactly as described above.

Regards,
Tarek

[sammoore]

I've noticed this usually occurs on my machine when I use git to apply changes to SCSS files while LiveSync is running, e.g. git stash pop and the associated stash contains changes to SCSS files.

You have to kill all node-sass processes that were spawned as a result of tns before restarting the build process to proceed.

I'm not sure what could be causing the issue consistently on other machines, but I suspect it may be a conflicting file watcher program.

EDIT: I am running High Sierra, but unlike other people above, the issue only seems to occur after bulk-updating of files or when git makes modifications.

[zbranzov]

The latest version of the plugin v1.5.0 utilizes the chokidar watcher. Would check whether you experience the infinite compiling using it?

[nitishjeebun]

Hey Guys, Was having the same issue, I just had an empty css file causing the issue, just added something it and restarting the "tns run" fixed the issue

[btaluy]

The latest version of the plugin v1.5.0 utilizes the chokidar watcher. Would check whether you experience the infinite compiling using it?

Yes, issue is still there even updating it to 1.6.0 did not fix this issue.

[YoyoAdvent]

We've met the same problem. For a temporary solution, on our dev environment, we have uninstalled the nativescript-dev-sass plugin, installed and use the original sass instead.
By doing so, we lose the LiveSyncing ability, but building time was significantly improved from 5+ mins to 0.5 mins.

[endarova]

Hi, we have released new version of the [email protected] plugin that should fix that faulty behavior. You can give it a try by executing npm i nativescript-dev-sass --save-dev in your project folder.

[rosen-vladimirov]

Closing as the nativescript-dev-sass plugin is no longer supported. In case you want to use SASS in your NativeScript application, you can use node-sass.