search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.75k stars 11.98k forks source link

ng build --prod breaks with an error in css #16875

Closed gvsakhil closed 4 years ago

gvsakhil commented 4 years ago

🐞 bug report

Description

When I run ng build --prod I get an issue:

🔥 Exception or Error



92% chunk asset optimization optimize-css-webpack-pluginAn unhandled exception occurred: Lexical error on line 1: Unrecognized text.

  Erroneous area:
1: 100% - $icon-size-xl - 1
^.........^
See "/private/var/folders/rr/l3g7t6150l34y62qrtttjyfc0000gn/T/ng-5EAXR6/angular-errors.log" for further details.

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.1

Anything else relevant? My package.json "dependencies": { "@angular-devkit/schematics": "^9.0.1", "@angular/animations": "~9.0.0", "@angular/cdk": "^9.0.0", "@angular/common": "~9.0.0", "@angular/compiler": "~9.0.0", "@angular/core": "~9.0.0", "@angular/forms": "~9.0.0", "@angular/platform-browser": "~9.0.0", "@angular/platform-browser-dynamic": "~9.0.0", "@angular/router": "~9.0.0", "angularx-qrcode": "^2.1.0", "jwt-decode": "^2.2.0", "moment": "^2.24.0", "ngx-bootstrap": "^5.1.2", "ngx-spinner": "^8.0.3", "ngx-toastr": "^11.0.0", "primeicons": "^2.0.0", "primeng": "^9.0.0-rc.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" },

My log file [error] JisonLexerError: Lexical error on line 1: Unrecognized text.

Erroneous area: 1: 100% - $icon-size-xl - 1 ^.........^ at /Users/akhilgrandhi/Documents/apocfrontend/styles.73840fd418084795d475.css:17:225980 at Object.parseError (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:1164:15) at Object.lexer_parseError [as parseError] (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:2297:44) at Object.lexer_next [as next] (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:3292:22) at Object.lexer_fastLex [as fastLex] (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:3367:18) at fastLex (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:1567:27) at Parser.parse (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/parser.js:1641:30) at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/lib/transform.js:30:30 at walk (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/walk.js:19:7) at ValueParser.walk (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/node_modules/postcss-value-parser/lib/index.js:18:3) at transformValue (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/lib/transform.js:24:50) at _default (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/lib/transform.js:59:100) at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss-calc/dist/index.js:25:51 at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:135:18 at Rule.each (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:101:16) at Rule.walk (/Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:131:17) at /Users/akhilgrandhi/Documents/apocfrontend/node_modules/postcss/lib/container.js:148:24

marfehr commented 4 years ago

This should fix your issue

100% - #{$icon-size-xl} - 1

gvsakhil commented 4 years ago

ok thanks I found it in my styles.scss and fixed it @marfehr

alan-agius4 commented 4 years ago

Closing as this seems to have been a user issue.

alan-agius4 commented 4 years ago

Reopening as we should display a more actionable error.

cedricremond commented 4 years ago

I had a problem that seems related. The error shown was (only in prod mode):

ERROR in Parse error on line 1: 

^
Expecting "CALC", "LPAREN", "SUB", "NUMBER", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "expression", "math_expression", "value", "function", "css_value", got unexpected end of input

It was due to an empty calc() in a scss file, I had to comment out all my scss files and test them one by one as the error was not explicit.

gvsakhil commented 4 years ago

Its better to atleast show in which file we have the error so that it helps the user to solve it quickly. I made a global search in vscode and I found the error

arthurspa commented 4 years ago

I have the same problem:

[error] JisonParserError: Parse error on line 1: 
- var(--spac...
--^
Expecting "ADD", "SUB", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "dimension", got unexpected "FUNCTION"
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\styles.9988a5427a55852a23cc.css:3125:3
    at Parser.parseError (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\parser.js:1200:15)
    at Parser.parse (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\parser.js:1716:30)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\lib\transform.js:33:30
    at walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-value-parser\lib\walk.js:7:16)
    at ValueParser.walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-value-parser\lib\index.js:18:3)
    at transformValue (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\lib\transform.js:24:50)
    at _default (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\lib\transform.js:66:100)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\index.js:27:32
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:135:18
    at Rule.each (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:101:16)
    at Rule.walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:131:17)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:148:24
    at Root.each (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:101:16)
    at Root.walk (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss\lib\container.js:131:17)
    at C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\postcss-calc\dist\index.js:23:9
    at initializePlugin (C:\Users\estrlia\Dev\pt_esw\pt\filesystems\web_files\lighttpd\app\node_modules\cssnano\dist\index.js:31:51)
    at process._tickCallback (internal/process/next_tick.js:68:7)

I found out that it's due to CSS custom properties @space-small: var(--space-small);. It only happens when building with --prod. I'm using LESS. Note: I need to use css var().

arthurspa commented 4 years ago

I found the error. However it's not easy because even if the build is set to verbose I had no idea where the problem was. Please, improve the log stack trace where the problem happened.

vigneshbarani24 commented 4 years ago

Got a similar issue. Please do improve where exactly the issue is so it gets easier to fix them up.


( * 1.25) + ...
--^
Expecting "CALC", "LPAREN", "ADD", "SUB", "FUNCTION", "LENGTH", "ANGLE", "TIME", "FREQ", "RES", "UNKNOWN_DIMENSION", "EMS", "EXS", "CHS", "REMS", "VHS", "VWS", "VMINS", "VMAXS", "PERCENTAGE", "NUMBER", "math_expression", "function", "dimension", "number", got unexpected "MUL"
See "C:\Users\SVIGNE~1\AppData\Local\Temp\ng-waUyAW\angular-errors.log" for further details.`
WiharlleyWill commented 4 years ago

1 - Hi. I had some warnings like: Nebular Theme: nb-theme () cannot find value for key radius forcorporate theme.

1 - FIX: found the problem on my login.component.scss and removed the scss. After that I managed to compile and go up to production.

2 - But now I had to load resource: the server responded with a status of 404 () problem with dlist updloaded. If I fix I will edit this.

2 - FIX: I just remove <base href="/"> in my index.html.

shubham-beri commented 4 years ago

For all those who are using Argon Angular Template (not the dashboard one) You will have to fix this in multiple lines.

Before: 100% - $icon-size-xl - 1 After 100% - #{ $icon-size-xl } - 1

wherever curly braces are not there _icon.scss file that is present in

assets/custom/vendor/_icon.scss

angular-automatic-lock-bot[bot] commented 4 years ago

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.

This action has been performed automatically by a bot.