New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1.7.0 wont prod build: cannot read property line of undefined #9313
Comments
I can't replicate this with a new project created with 1.7.0-beta.1. Tried the following all with success:
|
Installed bundle analyser to compare the bundle size with 1.6.3 (see my other opened issue). The only change was to add a lazy loaded route with only one component. And move from css to scss. |
Does the error occur on a new project with no changes? |
Tried that 3 times on brand new project. 1 fail, 2 normal build. I tried to remove node modules and npm install between each try |
The described error occurs with x Angular cli 1.7.0-beta1 (did not occur with 1.6.5) and... a CSS property written in two lines Example from my project :
vs
If it can help somebody, I found where was my problematic css property by adding console.log(serializedBuffer) at node_modules/clean-css/lib/tokenizer/tokenizer.js : line 434. |
Thanks @MisterEffix, it can be a real good lead. I tried to reproduce using a splitted css and it fails every and each time I |
@MisterEffix thanks, i faced the same issue, which i solved following your advice,
which i fixed by deleting the semicolon near the '{' by :
|
Any news on that? With 1.7.0 stable it still occurs. |
This is also happening for me too. I can confirm downgrading @angular/cli to 1.6.6 fixes the problem. If it helps in solving what is going on in 1.7 here is my environment info. It is happening on both MacOS and the
|
same issue with 1.7.0 stable .../node_modules/clean-css/lib/reader/input-source-map-tracker.js:37 TypeError: Cannot read property 'line' of undefined |
Downgrading to 1.6.8 fixes the issue. It surely is a dependency upgrade in 1.7.0 which is more strict on css/scss way of writing. It's abnormal since style which was previously "compiled" and minified previously should not break the build since there was no change in these files. There are several way of writing css, including breaking lines on some long properties. It should'nt break the build. |
As already mentioned, broken in 1.7.0 but working in 1.6.8 with the same error as @KayoticSully and @sgomanf. In my case the error occurs in a third party SCSS file from the PrimeNG Ultima theme. If I reformat the file using VSCode the error in the production build goes away but the CSS produced does not look right ... _data (reformatted in VScode).scss.txt Using original _data.scss (CSS correct, compile error prod build). Using reformatted _data.scss (CSS incorrect, compile OK prod build). |
I am also facing this issue. Is there any solution for this? |
In my opinion, the way we write css, including "beautified" versions with multiple line breaks for better "looking code" should not impact the build success or fail. |
@blackholegalaxy I have too many css files in my project. Is there any way that I can find out that which file has such issue ? |
Downgrading to 1.6.8 did not solve my issue. |
I did not manage to find a way to detect faulty file. Solution by @MisterEffix console logs around 500 lines of |
@blackholegalaxy, I have looked for a line at the end of these logs the first line that was "foundable" in my source files. My one was something like "0.2s margin ease-in" (a string easly foundable in my css). It didn't point exactly to the problematic css property but the problem wasn't far away. Hope it helps. |
Alright! It's confirmed that this is happening in latest version of angular cli. I request that please fix this angular cli issue so that we can use latest versions. I hope this would help. |
This worked for me. My stack trace was a little different and so I had to add this at a different line number, however, it was sufficient to help me identify the error in my CSS. It boiled down to the same issue @Knewtone was having -- an extra comma following the rule name. |
It doesn't change the fact having scss which previously compiled and which seems correct. In the example mentionned above, MisterEffix case:
is a common way to write long statements. It's not incorrect and should therefore not break the build. |
Maybe helpful for any VSCode user: |
Finally manage to get the one who threw the error: it was a non-breaking space in the scss. Definitely, this should'nt break that way hard. |
@asadsahi In my case, the VSCode Beautify extension fixed the compile issue but the resulting CSS produced didn't seem right. |
I agree that the SCSS compiler is improperly handling whitespace and/or should allow more flexibility with technically incorrect CSS. However, this is an issue with clean-css module, not Angular and so reporting it here really isn't going to get much traction. Not trying to be dismissive, just suggesting a better place to focus these issues. |
@jacobslusser you are right. I will close the comment and report it to clean-css instead |
@jacobslusser that is even more worrying to see the differences in rendering. |
@jamieathans, we'll check Ultima theme. Thanks a lot! |
@mertsincan I found out the issue with the Ultima theme. Line 487 of By reformatting and removing the bad character, the Personally, I prefer it the original way which is basically |
@jamieathans how do you lint this?? I have same problem with materialize-css (using dist/css), on
|
@elporfirio I had to go through my scss/css manually to find out which one was causing the problem. The VSCode Highlight Bad Chars plugin showed me where the problem was. |
@jamieathans thank you. Alternative method don't add css/sass to It is ugly, but it can help while library gets an update. |
I wonder how quickly it will be fixed upstream; if it's not quick, it will be wonderful to have CLI put in some kind of workaround. It's currently a remarkably unpleasant development experience when this happens. |
Would be great if angular team, at scss compile step, could regex and remove all non-breaking spaces. |
You can follow the issue on clean-css/clean-css#1006 |
Used js-beautify (https://github.com/beautify-web/js-beautify) npm -g install js-beautify Then cd to /src. Then create .jsbeautifyrc en /src path.
} And finally apply to all .scss files (or .css if you have them) In Windows I used: |
any update on this? |
replace the code in node_modules/clean-css/lib/reader/input-source-map-tracker.js with the following
|
It's now fixed as per clean-css 4.1.10 release just few hours ago. So it it occurs again on your side, just let npm install CLI with latest clean-css version. It should work. |
I still have this issue with the version 1.7.1 of the CLI which is installed with clean-css 4.1.9 |
The issue is solved with angular CLI 1.7.2 which is is installed with clean-css 4.1.10 :-). It can be closed. |
@FabienDehopre you need to remove node_modules and let npm/yarn recompute angular dependencies. The Angular cli dependency is set as |
We have updated our dependency to
Installing and uninstalling should force the package manager to use the newer one and dedupe it. This is generally useful when you want to force your project to use a certain version of an indirect dependency, and better than just deleting your node_modules and package lock. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Small dependencies problem I guess.
Versions
Repro steps
v1.7.0-beta.1
ng build --prod
Observed behavior
The code won't compile at all. An error in modules.
Mention any other details that might be useful
Tried to delete
package-lock.json
, delete node_modules, fresh reinstall. Same problem. Also tried yarn with no success.Reverting to previous version make the error disappear.
The text was updated successfully, but these errors were encountered: