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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 10
Comments: 44 (3 by maintainers)

Commits related to this issue

reinstalled clean-css as per https://github.com/angular/angular-cli/issues/9313 issue — committed to phocus123/PixiePaintTest by phocus123 6 years ago

Most upvoted comments

We have updated our dependency to clean-css@4.1.11 meanwhile, but for those still affected you can do this:

npm install clean-css@4.1.11
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.

filipesilva on Mar 12, 2018

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

porfidev on Feb 21, 2018

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;
}

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

ghost on Jan 24, 2018

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.

kylecordes on Feb 22, 2018

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

jamieathans on Feb 19, 2018

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.

blackholegalaxy on Feb 18, 2018

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

It can be closed.

ghost on Mar 6, 2018

any update on this?

vithubati on Mar 3, 2018

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.

ayyazzafar on Feb 19, 2018

Downgrading to 1.6.8 did not solve my issue.

ayyazzafar on Feb 19, 2018