Build fails with `Cannot redefine property: File` using Node 20.6.0

[Yogu]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

If you use Node 20.6.0 (released yesterday) to build an Angular 16 papp, the following error occurs:

TypeError: Cannot redefine property: File
    at Function.defineProperty (<anonymous>)
    at Object.<anonymous> (/home/user/my-project/node_modules/@angular/compiler-cli/node_modules/@babel/core/lib/index.js:7:8)

I know Node 20 is not officially supported at the moment and it's not yet in LTS, but it worked before (in 20.5.1) and maybe it's good too approach this issue early. The relevant changes in Node might get backported to node 18.

I also don't know yet if this is an issue in Node, babel or angular-cli. In either case, it might be good to have this as a tracking issue.

Also affects Angular 15 and Angular 17.0.0-next.0.

Minimal Reproduction

nvm install 20.6.0
nvm use 20.6.0
npx @angular/cli@latest new my-project # (using defaults)
cd my-project
npx ng build

Exception or Error

⠇ Generating browser application bundles (phase: building)...node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

TypeError: Cannot redefine property: File
    at Function.defineProperty (<anonymous>)
    at Object.<anonymous> (/home/user/my-project/node_modules/@angular/compiler-cli/node_modules/@babel/core/lib/index.js:7:8)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/home/user/my-project/node_modules/@angular/compiler-cli/node_modules/@babel/core/lib/config/helpers/config-api.js:16:9)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/home/user/my-project/node_modules/@angular/compiler-cli/node_modules/@babel/core/lib/config/files/configuration.js:48:18)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/home/user/my-project/node_modules/@angular/compiler-cli/node_modules/@babel/core/lib/config/files/index.js:73:22)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/home/user/my-project/node_modules/@angular/compiler-cli/node_modules/@babel/core/lib/index.js:184:14)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at cjsLoader (node:internal/modules/esm/translators:282:14)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:233:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:308:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:428:15)
    at async Object.customOptions (/home/user/my-project/node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js:49:64)
    at async Object.loader (/home/user/my-project/node_modules/babel-loader/lib/index.js:67:20)

Node.js v20.6.0

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.2.1
Node: 20.6.0 (Unsupported)
Package Manager: npm 9.8.1
OS: linux x64

Angular: 16.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.1
@angular-devkit/build-angular   16.2.1
@angular-devkit/core            16.2.1
@angular-devkit/schematics      16.2.1
@angular/cli                    16.2.1
@schematics/angular             16.2.1
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

Warning: The current version of Node (20.6.0) is not supported by Angular.

Anything else relevant?

No response

[Yogu]

nodejs/node#49497 sounds like it could cause this behavior. I noticed that the @babel/core/lib/index.js file is executed twice, and fails the second time because exports is already populated. That would match the behavior described in the node issue.

For the sake of completeness, here is the babel issue: babel/babel#15927

[JeanMeche]

Hi, thanks for reporting this. As you mentioned this is an upstream issue for an unsupported version yet.

[scorpation]

the problem is the version of Node. downgrade it to 16.14.2

[lazybobcat]

I don't know if it helps but I had the same issue with Node v20.6.0 and NPM 9.8.1 but it was fixed by upgrading NPM to 10.0.0 for the same version of Node

Edit: my bad, Nx cache was involved and downgrading Node to v18.13.0 was what fixed the issue

[lmknav]

Just encountered this with the latest node on GitLab pages. Didnt happen before.

[e-oz]

This issue is not related to NPM and not even related to Angular CLI.
node 20.6 breaks Babel, Babel breaks Angular CLI.

[minikdev]

I had the same issue this morning on my dockerized React & Vite app.

I was using node:latest image in my Dockerfile. I checked the Node version of the latest tag is upgraded to v20.6 10 hours ago.
So I downgraded the node image to node:18-alpine3.17 and it works now. I believe the node.js team fix this soon.

[ogabz12345]

Mine still didn't work @minikdev even after changing the node image FROM node:18-alpine3.17 AS build

[minikdev]

@ogabz12345 I just tried to build it and it worked, you might need to rebuild your image,
you can use docker-compose up --build to rebuild it

[ogabz12345]

@minikdev Did the exact same thing, still getting same error and it literally started this morning. I also use FROM nginx:latest as serve can this be an issue as well?

[fonzane]

I encountered the same issue. After switching in my Dockerfile from
FROM node as build
to
FROM node:18-alpine3.17 as build
the error is gone.