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

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.

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

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.

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.

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

image

Using reformatted _data.scss (CSS incorrect, compile OK prod build).

image

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.

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

It can be closed.

any update on this?

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.

Downgrading to 1.6.8 did not solve my issue.