nx: Angular production build error in nx version 13.7.1

Current Behavior

Running npx nx build results in an error

Expected Behavior

Building the application

Steps to Reproduce

  • Create nx workspace with v13.7.1
  • Run npx nx build

Failure Logs

PS D:\VS Code Projects\test> npx nx build --verbose

> nx run client:build:production --verbose

⠙ Generating browser application bundles (phase: setup)...<t> [webpack.cache.PackFileCacheStrategy] restore cache container: 15.5634 ms
⠋ Generating browser application bundles (phase: sealing)...    [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
✔ Browser application bundle generation complete.
Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
HookWebpackError: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at makeWebpackError (D:\VS Code Projects\test\node_modules\webpack\lib\HookWebpackError.js:48:9)
    at D:\VS Code Projects\test\node_modules\webpack\lib\Compilation.js:3057:12
    at eval (eval at create (D:\VS Code Projects\test\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:98:1)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
-- inner error --
Error: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at failureErrorWithLog (D:\VS Code Projects\test\node_modules\esbuild\lib\main.js:1557:15)
    at D:\VS Code Projects\test\node_modules\esbuild\lib\main.js:1346:29
    at D:\VS Code Projects\test\node_modules\esbuild\lib\main.js:637:9
    at handleIncomingPacket (D:\VS Code Projects\test\node_modules\esbuild\lib\main.js:734:9)
    at Socket.readFromStdout (D:\VS Code Projects\test\node_modules\esbuild\lib\main.js:604:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)
    at readableAddChunk (node:internal/streams/readable:289:9)
    at Socket.Readable.push (node:internal/streams/readable:228:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:199:23)

 ——————————————————————————————————————————————————————————

 >  NX   Running target "client:build" failed

   Failed tasks:

   - client:build:production

   Hint: run the command with --verbose for more details.

PS D:\VS Code Projects\test>

Environment

PS D:\VS Code Projects\test> npx nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.13.2
   OS   : win32 x64
   npm  : 8.1.2

   nx : 13.7.1
   @nrwl/angular : 13.7.1
   @nrwl/cli : 13.7.1
   @nrwl/cypress : 13.7.1
   @nrwl/detox : undefined
   @nrwl/devkit : 13.7.1
   @nrwl/eslint-plugin-nx : 13.7.1
   @nrwl/express : undefined
   @nrwl/jest : 13.7.1
   @nrwl/js : undefined
   @nrwl/linter : 13.7.1
   @nrwl/nest : 13.7.1
   @nrwl/next : undefined
   @nrwl/node : 13.7.1
   @nrwl/nx-cloud : undefined
   @nrwl/react : undefined
   @nrwl/react-native : undefined
   @nrwl/schematics : undefined
   @nrwl/storybook : 13.7.1
   @nrwl/tao : 13.7.1
   @nrwl/web : undefined
   @nrwl/workspace : 13.7.1
   typescript : 4.5.5
   rxjs : 7.4.0
   ---------------------------------------
   Community plugins:
         @angular/animations: 13.2.0
         @angular/common: 13.2.0
         @angular/compiler: 13.2.0
         @angular/core: 13.2.0
         @angular/forms: 13.2.0
         @angular/platform-browser: 13.2.0
         @angular/platform-browser-dynamic: 13.2.0
         @angular/router: 13.2.0
         @angular-devkit/build-angular: 13.2.0
         @angular/cli: 13.2.0
         @angular/compiler-cli: 13.2.0
         @angular/language-service: 13.2.0

(node:9932) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at D:\VS Code Projects\test\node_modules\tslib\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 16
  • Comments: 48 (10 by maintainers)

Commits related to this issue

Most upvoted comments

I fix the issue writing the following lines.

not ios_saf 15.2-15.3 not safari 15.2-15.3

+47
ysantalla on Jan 30, 2022

I resolved the problem. Create a file in the root directory of the project by name “.browserslistrc” and put into it the following content:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3
+31
rashad-farajullayev on Jan 30, 2022

I’m having the same error. (An unhandled exception occurred: Transform failed with 1 error: error: Invalid version: “15.2-15.3”)

+23
ysantalla on Jan 30, 2022

FIX: At root of the app, have a .browserslistrc file, I configured this way:

0.5% Firefox ESR not dead not IE 9-11 not ios_saf 15.2-15.3

Found the solution here, configured it my self https://github.com/angular/angular-cli/issues/22606

+18
cvandradg on Jan 30, 2022

Just updated to v13.7.1 and seeing the same error

+11
pascalbayer on Jan 29, 2022

Hi , I had the same issue , without altering any files ,“npm audit fix --force”, resolved this issue . Hope it helps.

+9
shajith-it-is on Feb 2, 2022

I temporarily fixed only changing the .browserslist file of my apps like this:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3 # TODO: remove this line in next NX/angular update
not safari 15.2-15.3 # TODO: remove this line in next NX/angular update

and it worked, I’ll remove the last two lines following the NX updates

Yeah, this workaround worked for me either 👍

+4
KirillMetrik on Feb 1, 2022

I temporarily fixed only changing the .browserslist file of my apps like this:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3 # TODO: remove this line in next NX/angular update
not safari 15.2-15.3 # TODO: remove this line in next NX/angular update

and it worked, I’ll remove the last two lines following the NX updates

+4
t-ricci-delta on Feb 1, 2022

I am experiencing this same error on nx 13.6.1 after updating (via nx migrate) @angular-devkit/build-angular from 13.1.2 to 13.2.0. This is after updating every other angular-related dependency and dev dependency to 13.2.0. (Unfortunately I can’t post a full nx report, but I hope this comment helps narrow the issue.)

Adding the .browserslistrc as specified by cvandradg does not fix the problem.

Ran into the same issue. After running npx browserslist, I noticed safari 15.2-15.3 was included as well. Adding not safari 15.2-15.3 to my .browserslistrc file led to a passing build. Not sure this is a suitable solution, but is a workaround.

+4
kkiernan on Jan 30, 2022

npm audit fix --force

Worked for me

+2
fireflysemantics on Mar 5, 2022

@leosvelperez Do you plan to include the fix from #8783 in a version 12 release?

EDIT: After upgrading all @angular/* and @angular-devkit/* packages to 12.2.16 (except @angular/cdk, which is only available as 12.2.13), and updating all @nrwl/* packages to 12.10.1, and - most importantly - ng-packagr to 12.2.7 everything works fine now 🙌

+2
fischeversenker on Feb 25, 2022

Upgrading Cli and Angular worked for me.

ng update @angular/cli @angular/core

+2
joedandan on Feb 16, 2022

I resolved the problem. Create a file in the root directory of the project by name “.browserslistrc” and put into it the following content:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3

this solution does not work when creating brand new nx workspace

+2
nhhockeyplayer on Jan 30, 2022

~@leosvelperez Do you plan to include the fix from #8783 in a version 12 release?~

EDIT: After upgrading all @angular/* and @angular-devkit/* packages to 12.2.16 (except @angular/cdk, which is only available as 12.2.13), and updating all @nrwl/* packages to 12.10.1, and - most importantly - ng-packagr to 12.2.7 everything works fine now 🙌

Updating to the latest in the @angular/* - 13.x branch helped me. Thanks @fischeversenker

+1
coderroggie on Mar 25, 2022

I resolved the problem. Create a file in the root directory of the project by name “.browserslistrc” and put into it the following content:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3

this worked for me thanks

+1
JeddBurch on Mar 21, 2022

I temporarily fixed only changing the .browserslist file of my apps like this:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3 # TODO: remove this line in next NX/angular update
not safari 15.2-15.3 # TODO: remove this line in next NX/angular update

and it worked, I’ll remove the last two lines following the NX updates

Yeah, this workaround worked for me either 👍

This also worked for me today.

+1
yroc92 on Mar 10, 2022

That sounds like a cache issue on CI. As mentioned above, the apps build issue is resolved by having @angular/cli on 13.2.1 or higher, which you already have.

+1
leosvelperez on Feb 9, 2022

@jogelin could you provide more details? The Nx report shows you have the right versions for the affected packages, I just created a 13.8.0 workspace and it works fine. Is it an app or a lib that’s failing?

@t-ricci-delta we didn’t include a migration (probably should), as mentioned here https://github.com/nrwl/nx/issues/8768#issuecomment-1026697752 you need to update the @angular/cli version to at least 13.2.1 to solve the app build issue.

+1
leosvelperez on Feb 9, 2022

I resolved the problem. Create a file in the root directory of the project by name “.browserslistrc” and put into it the following content:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3

That Worked

+1
msamyashash on Feb 5, 2022

The fixes have been released as part of 13.7.2 🎉

+1
FrozenPandaz on Feb 2, 2022
Read more comments on GitHub
← nx: Angular MFE No version specified and unable to determine one
nx: Angular Universal dev:ssr doesn't work after upgrade to v12.3.5 →