13

I just upgraded an environment with nrwl from angular version 11 to 12 with two angular applications and several libraries. After update when I try to compile using optimization settings:

angular.json

{
 ....
 "optimization": {
    "scripts": true,
    "styles": {
       "minify": true,
       "inlineCritical": false
     },
     "fonts": true
  },
}

It gives me the following error (sass and scss component files):

/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass - Error: /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/libs/ui-share-components/src/lib/top-panel/top-panel/top-panel.component.sass from Css Minimizer
Error: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at failureErrorWithLog (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1493:15)
    at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:1282:29
    at /home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/jose/WORK/Rental/REAL/APPS/angular-nx-ws/node_modules/@angular-devkit/build-angular/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:309:12)
    at readableAddChunk (_stream_readable.js:284:9)
    at Socket.Readable.push (_stream_readable.js:223:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

Disabling styles.minify and fonts compiles without problems:

"optimization": {
    "scripts": true,
    "styles": {
       "minify": false,
       "inlineCritical": false
     },
     "fonts": false
  },
}

2 Answers 2

16

Reason of the issue

It is expected browserslist to return an entry for each version ("safari 15.2", "safari 15.3") instead of a range ("safari 15.2-15.3"). So, this is just a bug in the parsing logic of Safari browser versions which needs to be corrected and will be done soon in fixed versions of Angular 12/Angular 13. Link to details is here.

IMPORTANT UPDATE:

This is fixed in v12.2.16 and v13.2.1, please update if you are experiencing this issue. Users on v11 shouldn't be affected. Link to details is here. If you can not/do not want to update for any reason, then one of the workarounds below can be used.

Workarounds:

Modify .browserslistrc

Add to .browserslistrc such lines:

not ios_saf 15.2-15.3 # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768
not safari 15.2-15.3  # temporary solution to avoid build issues https://github.com/nrwl/nx/issues/8768

It has to come AFTER any mentions of ios_saf or safari. Otherwise, it doesn't work. Link to workaround is here.

Erase content of .browserslistrc

Erasing content of .browserslistrc helps to fix builds. Link to workaround is here.

Delete .browserslistrc

Deletion of .browserslistrc helps to fix builds. Link to workaround is here.

Install caniuse-lite

Add caniuse-lite package:

npm install [email protected] --save-dev --save-exact

Link to workaround is here.

4
  • 1
    Keep in mind that this is a workaround. The actual fix is yet to come. Jan 31, 2022 at 13:10
  • 1
    Worked. But important - it has to come AFTER any mentions of ios_saf or safari. Otherwise it doesn't work. Jan 31, 2022 at 14:42
  • 1
    @AdrianMadaras That is why I added # and comment to keep reminding myself that it is actually workaround.
    – Serge P
    Jan 31, 2022 at 17:42
  • @KirillGroshkov I will update the answer with your comment, thanks.
    – Serge P
    Jan 31, 2022 at 17:42
2

Check your .browserslistrc file, you can add not ios_saf 15.2-15.3 to remove the invalid ios safari browser range. Source: https://github.com/angular/angular-cli/issues/22606#issuecomment-1025000846

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.