Ionic-app-scripts: Error executing sass task

Created on 1 Feb 2017 · 10Comments · Source: ionic-team/ionic-app-scripts

Short description of the problem:

Cannot execute sass task

Steps to reproduce:

npm run build
npm run sass

Error

> App@ sass C:\app
> ionic-app-scripts sass
[13:35:52]  ionic-app-scripts 1.0.0
[13:35:52]  sass started ...
[13:35:52]  webpack started ...
[13:35:52]  ionic-app-script task: "sass"
[13:35:52]  TypeError: Cannot read property 'fileCache' of undefined
TypeError: Cannot read property 'fileCache' of undefined
    at Object.getIonicEnvironmentPlugin (C:\app\node_modules\@ionic\app-scripts\dist\webpack\ionic-webpack-factory.js:7:73)
    at Object.<anonymous> (C:\app\node_modules\@ionic\app-scripts\config\webpack.config.js:34:25)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.fillConfigDefaults (C:\app\node_modules\@ionic\app-scripts\dist\util\config.js:125:25)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "sass"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! App@ sass: `ionic-app-scripts sass`
npm ERR! Exit status 1

Which @ionic/app-scripts version are you using?

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.5.0

Package json

{
  "name": "App",
  "author": "App",
  "homepage": "http://app.com",
  "private": true,
  "scripts": {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve",
    "build": "ionic-app-scripts build",
    "watch": "ionic-app-scripts watch",
    "sass": "ionic-app-scripts sass"
  },
  "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.6",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^1.0.0",
    "sw-toolbox": "^3.4.0",
    "typescript": "2.0.9"
  },
  "description": "App",
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": []
}

medium needs reply

Source

yauros

All 10 comments

Hmmm, I haven't seen this one before. Can you come up with a way for me to recreate the issue?

Thanks,
Dan

danbucholtz on 2 Feb 2017

Sure, for instance:

Start a new ionic project:
ionic start example --v2

Build the solution ( i suppose is required before using sass task later ):
npm run build

Add sass task into package.json

"scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "sass": "ionic-app-scripts sass",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  }`

Apply sass:
npm run sass

And finally the output:

> ionic-hello-world@ sass C:\example
> ionic-app-scripts sass

[07:51:25]  ionic-app-scripts 1.0.0
[07:51:25]  sass started ...
[07:51:25]  webpack started ...
[07:51:25]  ionic-app-script task: "sass"
[07:51:25]  TypeError: Cannot read property 'fileCache' of undefined
TypeError: Cannot read property 'fileCache' of undefined
    at Object.getIonicEnvironmentPlugin (C:\example\node_modules\@ionic\app-scripts\dist\webpack\ionic-webpack-factory.js:7:73)
    at Object.<anonymous> (C:\example\node_modules\@ionic\app-scripts\config\webpack.config.js:34:25)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.fillConfigDefaults (C:\example\node_modules\@ionic\app-scripts\dist\util\config.js:125:25)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "sass"
npm ERR! node v7.5.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ sass: `ionic-app-scripts sass`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ sass script 'ionic-app-scripts sass'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts sass
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\example\npm-debug.log

yauros on 2 Feb 2017

Can you try using Node 6.9.x, the recommended LTS version? My guess is it's an issue with Node 7.5 not being supported yet by one of the dependencies.

Thanks,
Dan

danbucholtz on 2 Feb 2017

Just tried with 6.9.5 ( reinstalling all dependencies ) but no lucky :(

[08:04:35]  ionic-app-scripts 1.0.0
[08:04:35]  sass started ...
[08:04:35]  webpack started ...
[08:04:35]  ionic-app-script task: "sass"
[08:04:35]  TypeError: Cannot read property 'fileCache' of undefined
TypeError: Cannot read property 'fileCache' of undefined
    at Object.getIonicEnvironmentPlugin (C:\example\node_modules\@ionic\app-scripts\dist\webpack\ionic-webpack-factory.js:7:73)
    at Object.<anonymous> (C:\example\node_modules\@ionic\app-scripts\config\webpack.config.js:34:25)
    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.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.fillConfigDefaults (C:\example\node_modules\@ionic\app-scripts\dist\util\config.js:125:25)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "sass"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ sass: `ionic-app-scripts sass`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ sass script 'ionic-app-scripts sass'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts sass
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\example\npm-debug.log

yauros on 2 Feb 2017

@yauros,

Can you run ionic info from your project root and paste the output in here? I'll try to recreate and figure it out.

Thanks,
Dan

danbucholtz on 2 Feb 2017

This is the ionic info for the example project, the error is the same than when i was using node 7.5 and also for ionic framework rc4 ( in other project )

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed

Thanks for your help!

yauros on 2 Feb 2017

@yauros,

Does everything work if you run ionic run android or ionic run ios? Does it only fail when you do the standalone sass build? Question - why are you doing the stand alone sass build?

Thanks,
Dan

danbucholtz on 2 Feb 2017

Yes, ionic run android works ok.
For standalone tasks it works in other cases like clean or copy.

I need to call standalone sass because the full build is slow for our requeriments. In a previous version ( dont remember very well wich one maybe 0.46? ) it worked ok

yauros on 2 Feb 2017

@yauros,

Okay, no worries. I will see what I can do to get it working again.

Thanks,
Dan

danbucholtz on 2 Feb 2017

We decided we aren't going to revisit this at this time.

Maybe in a few months. We're also open to a PR.

Thanks,
Dan

danbucholtz on 11 Feb 2017

👎8

Was this page helpful?

0 / 5 - 0 ratings

Related issues

[SOLVED]Error Can't resolve './app.module.ngfactory' product error TS18003 in ngc

dbarrecoquel · 3Comments

Live Reload CSS Windows 10

danbucholtz · 4Comments

Getting source-maps with --prod build?

christofferjjohansen · 3Comments

[0.0.39] "ionic platform add android" fails

nalkon · 4Comments

"ionic run --device --livelreload -c" should fail if ios-deploy did not finish successfully

bastibense · 3Comments