Angular-cli: 1.7.0 wont prod build: cannot read property line of undefined

[blackholegalaxy]

Small dependencies problem I guess.

Versions

Angular CLI: 1.7.0-beta.1
Node: 8.9.4
OS: darwin x64
Angular: 5.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0-beta.1
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.0-beta.1
@schematics/angular: 0.1.16
typescript: 2.5.3
webpack-bundle-analyzer: 2.9.2
webpack: 3.10.0

Repro steps

• Fresh project using CLI v1.7.0-beta.1
• ng build --prod

Observed behavior

The code won't compile at all. An error in modules.

/project/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
  if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
                       ^

TypeError: Cannot read property 'line' of undefined
    at originalPositionFor (/project/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37:24)
    at originalMetadata (/project/node_modules/clean-css/lib/tokenizer/tokenize.js:486:43)
    at intoTokens (/project/node_modules/clean-css/lib/tokenizer/tokenize.js:435:68)
    at tokenize (/project/node_modules/clean-css/lib/tokenizer/tokenize.js:74:10)
    at fromStyles (/project/node_modules/clean-css/lib/reader/read-sources.js:147:12)
    at fromString (/project/node_modules/clean-css/lib/reader/read-sources.js:48:10)
    at doReadSources (/project/node_modules/clean-css/lib/reader/read-sources.js:33:12)
    at readSources (/project/node_modules/clean-css/lib/reader/read-sources.js:24:10)
    at /project/node_modules/clean-css/lib/clean.js:99:12
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)

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.

[clydin]

I can't replicate this with a new project created with 1.7.0-beta.1. Tried the following all with success:

• ng build
• ng build --prod
• ng build --prod --sourcemap

webpack-bundle-analyzer appears to be in the version output in the issue report. This is not part of a new project. Are there any other changes to the project that were made?

[blackholegalaxy]

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.

[clydin]

Does the error occur on a new project with no changes?

[blackholegalaxy]

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

[MisterEffix]

The described error occurs with

x Angular cli 1.7.0-beta1 (did not occur with 1.6.5)
x --prod option.

and...

a CSS property written in two lines

Example from my project :

.is-loading .spinner {
   transition: 0.2s margin ease-in, 
      .4s opacity ease-in;
  margin-left: 5px;
  opacity: 1;
}

vs

.is-loading .spinner {
   transition: 0.2s margin ease-in, .4s opacity ease-in;
  margin-left: 5px;
  opacity: 1;
}

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.

[blackholegalaxy]

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 build --prod. Thanks!

[Temkit]

@MisterEffix thanks, i faced the same issue, which i solved following your advice,
i had

p,
ul,
{
    text-align: justify;
}

which i fixed by deleting the semicolon near the '{' by :

p,
ul,   <------------ deleted this semicolon
{
    text-align: justify;
}

[blackholegalaxy]

Any news on that? With 1.7.0 stable it still occurs.

[KayoticSully]

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 node:latest containers that I am using on GitLab in my CI pipeline.

.../node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
                       ^

TypeError: Cannot read property 'line' of undefined

[sgomanf]

same issue with 1.7.0 stable

.../node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
^

TypeError: Cannot read property 'line' of undefined

[blackholegalaxy]

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.

[jamieathans]

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.

_data.scss.txt

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).

[ayyazzafar]

I am also facing this issue.

Is there any solution for this?

[blackholegalaxy]

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.

[ayyazzafar]

@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 ?
Or is there any way to troubleshoot this ?

[ayyazzafar]

Downgrading to 1.6.8 did not solve my issue.

[blackholegalaxy]

I did not manage to find a way to detect faulty file. Solution by @MisterEffix console logs around 500 lines of 0, 1px and single liners like that. So it doesn't help determine which file/line is faulty.

[MisterEffix]

@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.

[ayyazzafar]

Alright! It's confirmed that this is happening in latest version of angular cli.
I finally fixed my issue by lowering version to 1.6.7 and by removing ^
I was facing this issue even after lowering version:
"@angular/cli": "^1.6.7"
Then I removed ^ to fix the cli version and now it works fine.

I request that please fix this angular cli issue so that we can use latest versions.

I hope this would help.

[jacobslusser]

adding console.log(serializedBuffer) at node_modules/clean-css/lib/tokenizer/tokenizer.js

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.

[blackholegalaxy]

It doesn't change the fact having scss which previously compiled and which seems correct. In the example mentionned above, MisterEffix case:

.is-loading .spinner {
   transition: 0.2s margin ease-in, 
      .4s opacity ease-in;
  margin-left: 5px;
  opacity: 1;
}

is a common way to write long statements. It's not incorrect and should therefore not break the build.

[asadsahi]

Maybe helpful for any VSCode user:
Installing this beautity extension and format all SCSS files with it has fixed the issue.

[blackholegalaxy]

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.

[jamieathans]

@asadsahi In my case, the VSCode Beautify extension fixed the compile issue but the resulting CSS produced didn't seem right.

See my previous comment.

[jacobslusser]

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.

[blackholegalaxy]

@jacobslusser you are right. I will close the comment and report it to clean-css instead

[asadsahi]

@jacobslusser that is even more worrying to see the differences in rendering.

[mertsincan]

@jamieathans, we'll check Ultima theme. Thanks a lot!

[jamieathans]

@mertsincan I found out the issue with the Ultima theme.

Line 487 of assets/sass/theme/_data.scss contains a bad character.

By reformatting and removing the bad character, the border-color: $accentColor starts actually working and thus we see this being applied in the output.

Personally, I prefer it the original way which is basically border-color: inherit.

[elporfirio]

@jamieathans how do you lint this??

I have same problem with materialize-css (using dist/css), on ng build

```
92% chunk asset optimization/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
^

TypeError: Cannot read property 'line' of undefined
at originalPositionFor (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37:23)
at originalMetadata (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/tokenizer/tokenize.js:486:43)
at intoTokens (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/tokenizer/tokenize.js:435:68)
at tokenize (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/tokenizer/tokenize.js:74:10)
at fromStyles (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/reader/read-sources.js:147:12)
at fromString (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/reader/read-sources.js:48:10)
at doReadSources (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/reader/read-sources.js:33:12)
at readSources (/Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/reader/read-sources.js:24:10)
at /Users/elporfirio/Projects/temu-fidelizacion-cms-nodejs/source/node_modules/clean-css/lib/clean.js:99:12
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
```

[jamieathans]

@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.

[elporfirio]

@jamieathans thank you.

Alternative method don't add css/sass to angular.cli , instead copy css to assets folder, and add respective link to index.html.

It is ugly, but it can help while library gets an update.

[kylecordes]

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.

[blackholegalaxy]

Would be great if angular team, at scss compile step, could regex and remove all non-breaking spaces.

[scote]

You can follow the issue on https://github.com/jakubpawlowicz/clean-css/issues/1006

[pacoferre]

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.

{
"css": {
    "allowed_file_extensions": [
        "css",
        "scss",
        "sass",
        "less"
    ],
    "end_with_newline": false,
    "indent_char": " ",
    "indent_size": 4,
    "newline_between_rules": true,
    "selector_separator": " ",
    "selector_separator_newline": false,
    "preserve_newlines": false,
    "max_preserve_newlines": 1
}

}

And finally apply to all .scss files (or .css if you have them)

In Windows I used:
FORFILES /S /M *.scss /C "cmd /c css-beautify -r -f @file"

[vithubati]

any update on this?

[vazgen6]

replace the code in node_modules/clean-css/lib/reader/input-source-map-tracker.js with the following
````
var SourceMapConsumer = require('source-map').SourceMapConsumer;

function inputSourceMapTracker() {
var maps = {};

return {
all: all.bind(null, maps),
isTracking: isTracking.bind(null, maps),
originalPositionFor: originalPositionFor.bind(null, maps),
track: track.bind(null, maps)
};
}

function all(maps) {
return maps;
}

function isTracking(maps, source) {
return source in maps;
}

function originalPositionFor(maps, metadata, range, selectorFallbacks) {
var line = metadata[0];
var column = metadata[1];
var source = metadata[2];
var position = {
line: line,
column: column + range
};
var originalPosition;

while (!originalPosition && position.column > column) {
position.column--;
originalPosition = maps[source].originalPositionFor(position);
}

if (originalPosition && originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
return originalPositionFor(maps, [line - 1, column, source], range, selectorFallbacks - 1);
}

return (originalPosition && originalPosition.line) !== null ?
toMetadata(originalPosition) :
metadata;
}

function toMetadata(asHash) {
if(asHash){
return [asHash.line, asHash.column, asHash.source];
}
}

function track(maps, source, data) {
maps[source] = new SourceMapConsumer(data);
}

module.exports = inputSourceMapTracker;
```

[blackholegalaxy]

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.

[FabienDehopre]

I still have this issue with the version 1.7.1 of the CLI which is installed with clean-css 4.1.9

[MisterEffix]

The issue is solved with angular CLI 1.7.2 which is is installed with clean-css 4.1.10 :-).

It can be closed.

[blackholegalaxy]

@FabienDehopre you need to remove node_modules and let npm/yarn recompute angular dependencies. The Angular cli dependency is set as "clean-css": "^4.1.9" so by reinstalling you should get 4.1.10.
@MisterEffix already closed? ;p

[filipesilva]

We have updated our dependency to [email protected] meanwhile, but for those still affected you can do this:

npm install [email protected]
npm uninstall clean-css
npm ls clean-css

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>