NativeScript/nativescript-dev-sass

Problem if use symbolic link directory

jibon57 opened this issue · 8 comments

Hi,

I am facing one problem if I use "app" directory as symbolic link. Actually I am using Microsoft onedrive to sync my office & home PC. In this case I am just synchronizing only the 'app' directory. Instated of using the directory directly I am using symbolic link of "app" directory. Everything is working except sass file compilation.

screen shot 2018-02-17 at 3 44 32 pm

I am getting following errors:

/Users/jibon/Documents/My_Work/testApps/wonderfuleng/node_modules/node-sass/lib/watcher.js:22
  return Object.keys(graph.index);
                          ^

TypeError: Cannot read property 'index' of undefined
    at Object.watcher.reset (/Users/jibon/Documents/My_Work/testApps/wonderfuleng/node_modules/node-sass/lib/watcher.js:22:27)
    at watch (/Users/jibon/Documents/My_Work/testApps/wonderfuleng/node_modules/node-sass/bin/node-sass:254:20)
    at run (/Users/jibon/Documents/My_Work/testApps/wonderfuleng/node_modules/node-sass/bin/node-sass:313:5)
    at Object.<anonymous> (/Users/jibon/Documents/My_Work/testApps/wonderfuleng/node_modules/node-sass/bin/node-sass:397:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
 

package.json file

"nativescript": {
    "id": "org.nativescript.test",
    "tns-ios": {
      "version": "3.4.1"
    }
  },
  "scripts": {
    "lint": "tslint \"app/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "~5.2.0",
    "@angular/common": "~5.2.0",
    "@angular/compiler": "~5.2.0",
    "@angular/core": "~5.2.0",
    "@angular/forms": "~5.2.0",
    "@angular/http": "~5.2.0",
    "@angular/platform-browser": "~5.2.0",
    "@angular/platform-browser-dynamic": "~5.2.0",
    "@angular/router": "~5.2.0",
    "nativescript-angular": "~5.2.0",
    "nativescript-pro-ui": "~3.3.0",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.5",
    "tns-core-modules": "~3.4.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "codelyzer": "~4.0.2",
    "nativescript-dev-sass": "~1.3.5",
    "nativescript-dev-typescript": "~0.6.0",
    "nativescript-dev-webpack": "~0.9.1",
    "tslint": "~5.8.0",
    "typescript": "~2.6.2",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0",
    "copy-webpack-plugin": "~4.3.0",
    "raw-loader": "~0.5.1",
    "css-loader": "~0.28.7",
    "nativescript-worker-loader": "~0.8.1",
    "resolve-url-loader": "~2.2.1",
    "extract-text-webpack-plugin": "~3.0.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "@angular/compiler-cli": "~5.2.0",
    "@ngtools/webpack": "~1.9.4",
    "sass-loader": "~6.0.6"
  }

How can I solve the problem? Thanks in advance.

Update:
++++++

If I change the value node_modules/nativescript-dev-sass/lib/converter.js
var appDir = path.join(projectDir, "app");
with the actual link.. like
var appDir = path.join("/Users/jibon/OneDrive/My_Works/wonderfuleng/app");
then it works :) . Any better suggestion?

Update
+++++×

But above solution isn't working in Windows. It works when I start the run command but wasn't if I change any scss file. I mean isn't working with live sync. I can see it's only pushing the scss file but not any css file. Looks like it isn't compiling scss to css.


8:17:03 PM - Compilation complete. Watching for file changes.



Executing before-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepare\nativescript-dev-sass.js
Executing before-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepare\nativescript-dev-typescript.js
Hook skipped because either bundling or livesync is in progress.
Preparing project...
Executing before-prepareJSApp hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepareJSApp\nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\after-prepare\nativescript-dev-sass.js
Executing after-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\after-prepare\nativescript-dev-webpack.js
Successfully transferred home.scss.
Refreshing application...
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 20287
Successfully synced application com.myna.wonderfuleng on device 192.168.106.101:5555.
ActivityManager: Start proc 1629:com.myna.wonderfuleng/u0a132 for activity com.myna.wonderfuleng/com.tns.NativeScriptActivity
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

Hi @jibon57 ,

Recently we made some changes in the relative paths used which might fix your issues. I will let you know when we publish a new version. Till then you can create a package from this repo and test your scenario.

Hi @jibon57

Version 1.4.0 of the plugin is available in npm. There are changes in the way paths are used so you can check if your problems are fixed. Please, let us know if the new version solves your issues. You can also check the release notes.

Best regards,
Vesi

@radeva Thank you. Will try & let you update.

@radeva Just gave a try & it still isn't working:

D:\Others\Documents\My_Works\testing\wonderfuleng\node_modules\node-sass\lib\watcher.js:22
  return Object.keys(graph.index);
                          ^

TypeError: Cannot read property 'index' of undefined
    at Object.watcher.reset (D:\Others\Documents\My_Works\testing\wonderfuleng\node_modules\node-sass\lib\watcher.js:22:27)
    at watch (D:\Others\Documents\My_Works\testing\wonderfuleng\node_modules\node-sass\bin\node-sass:254:20)
    at run (D:\Others\Documents\My_Works\testing\wonderfuleng\node_modules\node-sass\bin\node-sass:313:5)
    at Object.<anonymous> (D:\Others\Documents\My_Works\testing\wonderfuleng\node_modules\node-sass\bin\node-sass:397:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)

JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 6302
10:33:31 PM - Compilation complete. Watching for file changes.



Executing before-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepare\nativescript-dev-sass.js
Hook skipped because either bundling or livesync is in progress.
Executing before-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepare\nativescript-dev-typescript.js
Hook skipped because either bundling or livesync is in progress.
Preparing project...
Executing before-prepareJSApp hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepareJSApp\nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\after-prepare\nativescript-dev-sass.js
Executing after-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\after-prepare\nativescript-dev-webpack.js
Successfully transferred _app-variables.scss.
Refreshing application...
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 47763
Successfully synced application com.myna.wonderfuleng on device 192.168.106.101:5555.
ActivityManager: Start proc 1866:com.myna.wonderfuleng/u0a162 for activity com.myna.wonderfuleng/com.tns.NativeScriptActivity
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 2535
Executing before-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepare\nativescript-dev-sass.js
Hook skipped because either bundling or livesync is in progress.
Executing before-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepare\nativescript-dev-typescript.js
Hook skipped because either bundling or livesync is in progress.
Preparing project...
Executing before-prepareJSApp hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\before-prepareJSApp\nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\after-prepare\nativescript-dev-sass.js
Executing after-prepare hook from D:\Others\Documents\My_Works\testing\wonderfuleng\hooks\after-prepare\nativescript-dev-webpack.js
Successfully transferred _app-variables.scss.
Refreshing application...
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 37101
Successfully synced application com.myna.wonderfuleng on device 192.168.106.101:5555.
ActivityManager: Start proc 1984:com.myna.wonderfuleng/u0a162 for activity com.myna.wonderfuleng/com.tns.NativeScriptActivity
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ANGULAR BOOTSTRAP DONE. 2487
"_resolved": "http://registry.npmjs.org/nativescript-dev-sass/-/nativescript-dev-sass-1.4.0.tgz",
 "_shasum": "89ee3490f5cf42b5b56882a10b1ff740abdb5e7d",
 "_shrinkwrap": null,
 "_spec": "nativescript-dev-sass@~1.4.0",
 "_where": "D:\\Others\\Documents\\My_Works\\testing\\wonderfuleng",
 "author": {
   "name": "Todd Anglin",
   "email": "toddanglin@gmail.com"
 },
 "bugs": {
   "url": "https://github.com/toddanglin/nativescript-dev-sass/issues"
 },

Hi @jibon57 ,

I'm wondering what's the reason to use this approach instead of GitHub, Bitbucket or any other Version Control system? If this is some kind of limitation, I could suggest to use the app folder separately and use some DiffMerge program to merge the changes you do in the application to the folder that is actually synced with your OneDrive.

We marked this issue as low, since it's too specific approach for development. Feel free to investigate it also by yourself and contribute to the plugin.

@radeva Thanks for your suggestion. We are using OneDrive since long time & want to keep continue. I have moved full project to OneDrive now & skip syncing hooks, node_modules & platform directories. So for me this problem isn't no longer affecting my regular works.