Ionic-framework: PostCSS could generate wrong source map error

Created on 4 Jan 2018  ·  27Comments  ·  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
If we build a new app using your blank starter or any other template building the android app we are running into this error

[16:52:18]  sass started ... 
Witout `from` option PostCSS could generate wrong source map or do not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning
[16:52:19]  sass finished in 1.13 s 

Expected behavior:
The bug message should not be

Steps to reproduce:
Create a new blank app using
ionic start postcss
build the android app doing
ionic cordova build android

and you can see log with the warn or error message

[16:57:54]  sass started ... 
Witout `from` option PostCSS could generate wrong source map or do not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning
[16:57:55]  sass finished in 793 ms 

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.9.4
    npm               : 5.6.0 
    OS                : Linux 4.13

Environment Variables:
    ANDROID_HOME : /abcdef/android/sdk

Misc:
    backend : legacy
v3

Most helpful comment

Until this is fixed, one possibility is to revert back some patches before the error was introduced:

npm i -D -E [email protected]

CHANGELOG.md of PostCSS

6.0.16
Fix warning text (by Michael Keller).
6.0.15
Add warning about missed from option on process().then() call.
Add IE 10 support.

https://github.com/postcss/postcss/blame/master/lib/lazy-result.es6#L192

In the: package.json of ionic-app-scripts
this "postcss": "^6.0.13" installs also the new patch 6.0.15, which has the new warning.

All 27 comments

As the warning says:

Without from option PostCSS could generate wrong source map or do not find Browserslist config. Set it to CSS file path or to undefined to prevent this warning

I added the field from and did set it to undefined and created a pull request.

https://github.com/StefanRein/ionic-app-scripts/blob/29873ae96611ae209ca4b065fd9940d6b7b96bda/src/sass.ts#L285

This resolves this warning. But I don't know if this has further consequences and the Ionic Team needs to fill in there a path to the generated css file or something like that.

@danbucholtz Could you review this please? Our automated builds are failing because of this.
(The "warning" is interpreted as an error..)

Edit: PostCSS uses ultimately console.warn, but this goes on node to the stderr pipe and our TeamFS fails.

stderr is used for warning or error output. Source

Until this is fixed, one possibility is to revert back some patches before the error was introduced:

npm i -D -E [email protected]

CHANGELOG.md of PostCSS

6.0.16
Fix warning text (by Michael Keller).
6.0.15
Add warning about missed from option on process().then() call.
Add IE 10 support.

https://github.com/postcss/postcss/blame/master/lib/lazy-result.es6#L192

In the: package.json of ionic-app-scripts
this "postcss": "^6.0.13" installs also the new patch 6.0.15, which has the new warning.

was this fixed?

@thezakman Not yet. The issue is open. The warning still exists.

find sass.js file. under /node_modules/@ionic/app-scripts/dist/sass.js.
find var postcssOptions and add from: undefined,

Finally should be like this:
var postcssOptions = {
from: undefined,
to: path_1.basename(sassConfig.outFile),
map: autoPrefixerMapOptions
};

https://github.com/ionic-team/ionic-app-scripts/pull/1364#issuecomment-358557878

You should not modify any files in the node_modules directory. If you update packages, reinstall them, installing them in a new project, any modifications are gone.

Please use the suggestion above for now.

i solve problem using this ( thanx also to @AlbenJohn)
https://stackoverflow.com/a/48315414

Any fix on this?

While it is not breaking my builds, this warning appears for me as well. This is a one line quick fix, is there already a pull request for this?

@johnroper100 Yes and it was approved (it's linked above).

Edit: The map files are working correctly.

This warning still apears.

This warning still apears.

This warning still appears.

@JosepAlacid @Veyhunk @ajmalhassan try using the fix that @hanifmazlan suggested. It actually works for me. https://stackoverflow.com/a/48315414/3288671

True, it does, but as @StefanRein suggests, it's still miles away from any production-like environment. better to avoid node_modules. Still waiting for a proper fix. Any updates from the Ionic Team?

This warning still apears.

This warning still apears.

This warning still apears.

This warning still apears.

This warning still apears.

Please stop. This is not helping in any way.
This is an open source project. If the people have time, they will fix it.
There are solutions mentioned above to fix the warning.

Though I don't want to speak on behalf of the IONIC team, I feel like something needs to be said here:

This issue doesn't get closer to resolution in proportion to the number of comments that say "This warning still appears." / "Any update on this" / "Any fix for this" / etc.

If you're stuck, read the thread – there's a workaround, which as the name suggests, will get you working. If you'd like to get updates on this, save some keystrokes by clicking the 'Subscribe' button – that allows you to receive updates in your e-mail. You'll also receive updates every time someone comments "Any update on this?", so please, don't be that person.

This warning still apears.

@jhonnhenry dude, seriously? We know - the issue is still open. Just subscribe and be on your way...

If you insist on leaving a comment, help us be more productive by providing some insight like what versions you're running.

I found this Workaround

First find sass.js file under /node_modules/@ionic/app-scripts/dist/sass.js. inside search var postcssOptions and add from: undefined,

Finally should be like this:

var postcssOptions = {
from: undefined,
to: path_1.basename(sassConfig.outFile),
map: autoPrefixerMapOptions
};

https://stackoverflow.com/questions/48162738/without-from-option-postcss-could-generate-wrong-source-map-or-do-not-find-bro

Still got his warning. Jumping into node_modules is no serious ::/

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

Was this page helpful?
0 / 5 - 0 ratings