Ionic-app-scripts: Sass / PostCSS error since version 1.3.8 (including 2.0.2)

[nicolus]

Short description of the problem:

Everything works fine with version 1.3.7, but when I update to version 1.3.8 (or anything newer, including 2.0.2) and run ionic cordova run android I get an error

Your current PostCSS version is 5.2.17, but autoprefixer uses 6.0.8. Perhaps this is the source of the error below.
[WARN] Error occurred during command execution from a CLI plugin (@ionic/cli-plugin-cordova). Your plugins may be out of
       date.
TypeError: Path must be a string. Received undefined

Full Stacktrace :

I got the full stack trace by running npm run build

[12:20:17]  ionic-app-scripts 1.3.8 
[12:20:17]  build dev started ...
[12:20:17]  clean started ...
[12:20:17]  clean finished in 1 ms
[12:20:17]  copy started ...
[12:20:17]  transpile started ...
[12:20:20]  transpile finished in 3.05 s
[12:20:20]  preprocess started ...
[12:20:20]  deeplinks started ...
[12:20:20]  deeplinks finished in 58 ms
[12:20:20]  preprocess finished in 60 ms
[12:20:20]  webpack started ...
[12:20:20]  copy finished in 3.25 s
[12:20:29]  webpack finished in 9.15 s
[12:20:29]  sass started ...
Your current PostCSS version is 5.2.17, but autoprefixer uses 6.0.8. Perhaps this is the source of the error below.
[12:20:30]  ionic-app-script task: "build" 
[12:20:30]  TypeError: Path must be a string. Received undefined 
TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:186:7)
    at eachParent (C:\virtualvisite\node_modules\browserslist\index.js:65:18)
    at getStat (C:\virtualvisite\node_modules\browserslist\index.js:79:12)
    at browserslist (C:\virtualvisite\node_modules\browserslist\index.js:188:15)
    at Browsers.parse (C:\virtualvisite\node_modules\autoprefixer\lib\browsers.js:61:16)
    at new Browsers (C:\virtualvisite\node_modules\autoprefixer\lib\browsers.js:52:30)
    at loadPrefixes (C:\virtualvisite\node_modules\autoprefixer\lib\autoprefixer.js:67:24)
    at plugin (C:\virtualvisite\node_modules\autoprefixer\lib\autoprefixer.js:78:24)
    at LazyResult.run (C:\virtualvisite\node_modules\postcss\lib\lazy-result.js:274:20)

npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ build: `ionic-app-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ build script 'ionic-app-scripts build'.
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 build
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:\virtualvisite\npm-debug.log

My Package.json

{ "name": "ionic-hello-world", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve", "ionic:upload": "ionic upload", "ionic:run": "ionic cordova run android" }, "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/badge": "^4.1.0", "@ionic-native/camera": "^4.1.0", "@ionic-native/core": "^4.1.0", "@ionic-native/dialogs": "^4.1.0", "@ionic-native/file": "^4.1.0", "@ionic-native/file-path": "^4.1.0", "@ionic-native/file-transfer": "^4.1.0", "@ionic-native/hotspot": "^4.1.0", "@ionic-native/local-notifications": "^4.1.0", "@ionic-native/network": "^4.1.0", "@ionic-native/social-sharing": "^4.1.0", "@ionic-native/splash-screen": "4.1.0", "@ionic-native/sqlite": "^4.1.0", "@ionic-native/status-bar": "^4.1.0", "@ionic-native/toast": "^4.1.0", "@ionic/storage": "2.0.1", "ionic-angular": "3.5.3", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12", "cordova-plugin-badge": "~0.8.1", "cordova-plugin-camera": "~2.4.1", "cordova-plugin-console": "~1.0.7", "cordova-plugin-device": "~1.1.6", "cordova-plugin-dialogs": "~1.3.3", "cordova-plugin-file": "~4.3.3", "cordova-plugin-file-transfer": "~1.6.3", "cordova-plugin-hotspot": "~1.2.8", "cordova-plugin-splashscreen": "~4.0.3", "cordova-plugin-statusbar": "~2.2.3", "cordova-plugin-whitelist": "~1.3.2", "cordova-plugin-x-socialsharing": "~5.1.8", "cordova-plugin-x-toast": "~2.6.0", "cordova-sqlite-storage": "~2.0.4", "de.appplant.cordova.plugin.local-notification": "~0.8.5", "ionic-plugin-keyboard": "~2.2.1" }, "devDependencies": { "@ionic/app-scripts": "1.3.8", "@ionic/cli-plugin-cordova": "1.4.1", "@ionic/cli-plugin-ionic-angular": "1.3.2", "typescript": "~2.3.4" }, "cordovaPlugins": [ "cordova-plugin-whitelist", "cordova-plugin-console", "cordova-plugin-statusbar", "cordova-plugin-device", "cordova-plugin-splashscreen", "ionic-plugin-keyboard" ], "cordovaPlatforms": [], "description": "virtualvisite: An Ionic project", "cordova": { "plugins": { "cordova-plugin-badge": {}, "cordova-plugin-camera": {}, "cordova-plugin-console": {}, "cordova-plugin-device": {}, "cordova-plugin-dialogs": {}, "cordova-plugin-file": {}, "cordova-plugin-file-transfer": {}, "cordova-plugin-hotspot": {}, "cordova-plugin-splashscreen": {}, "cordova-plugin-statusbar": {}, "cordova-plugin-whitelist": {}, "cordova-plugin-x-socialsharing": {}, "cordova-plugin-x-toast": {}, "cordova-sqlite-storage": {}, "de.appplant.cordova.plugin.local-notification": {}, "ionic-plugin-keyboard": {} } } }

[ravindranrahul]

same issue

[pvdyck]

the solution will be here => https://github.com/ai/browserslist/issues/158

[fabienpinel]

Changing autoprefixer version back to "6.7.2" in the package.json (+ do npm install) in node_modules/ionic/app-scripts work for me while the issue is being fixed.

[amanasmuei]

thanks @fabienpinel .. works fine after i change the autoprefixer to 6.7.2

[pvdyck]

solution is coming => https://github.com/ai/browserslist/pull/159

[pvdyck]

pull request waiting to be merged https://github.com/ai/browserslist/pull/161

[dovk]

Where is this autoprefixer ? Do you mean in sass.js ? Because I don't understand exactly what line to fix there. I don't have one in my package.json. Did you mean we shouldnpm install [email protected] --save? Thanks

[KishuPro]

I don't have one in my package.json

Hey @dovk it's not in your project's package.json, rather, from the project directory you should cd to node_modules\@ionic\app-scripts folder and edit the package.json there. Change the autoprefixer version to 6.7.2 and then run npm install from that folder itself.

[dovk]

Thanks, I'll give it a try

Sent from my iPhone

On 22 Jul 2017, at 17:54, Kishore <[email protected][e-mail]> wrote:

I don't have one in my package.json

Hey @dovkhttps://github.com/dovk it's not in your project's package.json, rather, from the project directory you should cd to node_modules\@ionic\app-scripts folder and edit the package.json there. Change the autoprefixer version to 6.7.2 and then run npm install from that folder itself.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/ionic-team/ionic-app-scripts/issues/1142#issuecomment-317188669, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AZgphnNJt_1GwFhI2V-P7cu0-YxfiLecks5sQg0GgaJpZM4OgItw.

[mhartington]

I am unable to replicate this issue.
Can you please run ionic info and paste the output here.

EDIT:
Seeing the issue now. Will look into the suggested PRs

[tbossert]

@KishuPro 's workaround fixed the issue for now. Thanks

[mhartington]

A new release of browserlist is out. Please delete your node-modules and run npm install again