Project cannot be build `Cannot read properties of undefined (reading 'file')`

[ms270169]

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

Building a new Angular 16.1.0 project via @angular/cli fails.
The project was not modified after creation!

Minimal Reproduction

$ npm -g install @angular/cli
...

$ ng version
...
Angular CLI: 16.1.3
Node: 16.19.0
Package Manager: npm 8.19.3
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1601.3 (cli-only)
@angular-devkit/core         16.1.3 (cli-only)
@angular-devkit/schematics   16.1.3 (cli-only)
@schematics/angular          16.1.3 (cli-only)

$  ng new ngx
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE ngx/README.md (1057 bytes)
CREATE ngx/.editorconfig (274 bytes)
CREATE ngx/.gitignore (548 bytes)
CREATE ngx/angular.json (2685 bytes)
CREATE ngx/package.json (1034 bytes)
CREATE ngx/tsconfig.json (901 bytes)
CREATE ngx/tsconfig.app.json (263 bytes)
CREATE ngx/tsconfig.spec.json (273 bytes)
CREATE ngx/.vscode/extensions.json (130 bytes)
CREATE ngx/.vscode/launch.json (470 bytes)
CREATE ngx/.vscode/tasks.json (938 bytes)
CREATE ngx/src/main.ts (214 bytes)
CREATE ngx/src/favicon.ico (948 bytes)
CREATE ngx/src/index.html (289 bytes)
CREATE ngx/src/styles.css (80 bytes)
CREATE ngx/src/app/app-routing.module.ts (245 bytes)
CREATE ngx/src/app/app.module.ts (393 bytes)
CREATE ngx/src/app/app.component.css (0 bytes)
CREATE ngx/src/app/app.component.html (23115 bytes)
CREATE ngx/src/app/app.component.spec.ts (982 bytes)
CREATE ngx/src/app/app.component.ts (207 bytes)
CREATE ngx/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
...

$ cd ngx
$ npm run build

> ngx@0.0.0 build
> ng build

✔ Browser application bundle generation complete.

./node_modules/@angular/common/fesm2022/common.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
TypeError: /tmp/ngx/node_modules/@angular/common/fesm2022/common.mjs: Cannot read properties of undefined (reading 'file')

./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
TypeError: /tmp/ngx/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs: Cannot read properties of undefined (reading 'file')

./node_modules/@angular/router/fesm2022/router.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
TypeError: /tmp/ngx/node_modules/@angular/router/fesm2022/router.mjs: Cannot read properties of undefined (reading 'file')

Exception or Error

/node_modules/@angular/common/fesm2022/common.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
TypeError: /tmp/ngx/node_modules/@angular/common/fesm2022/common.mjs: Cannot read properties of undefined (reading 'file')

./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
TypeError: /tmp/ngx/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs: Cannot read properties of undefined (reading 'file')

./node_modules/@angular/router/fesm2022/router.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
TypeError: /tmp/ngx/node_modules/@angular/router/fesm2022/router.mjs: Cannot read properties of undefined (reading 'file')

Your Environment

Angular CLI: 16.1.3
Node: 16.19.0
Package Manager: npm 8.19.3
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1601.3 (cli-only)
@angular-devkit/core         16.1.3 (cli-only)
@angular-devkit/schematics   16.1.3 (cli-only)
@schematics/angular          16.1.3 (cli-only)

Anything else relevant?

No response

[codingsamuel]

I have the same issue with Angular 14.

Maybe related to a babel dependecy which was uploaded an hour ago?

[alan-agius4]

This seems to be indeed caused by a change (intentional or not) in Babel which is breaking the Angular linker.

path.hub which is accessed in https://github.com/angular/angular/blob/5d11844a7c31df56d2b97e3aa6cd1a70b5fccc70/packages/compiler-cli/linker/babel/src/es2015_linker_plugin.ts#L40 appears to be undefined.

[CondensedMilk7]

I am experiencing the same issue.

Interestingly, I downgraded to angular 15 globally, and creating a new project results in the same build error.

versions in package.json:

  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.9",
    "@angular/cli": "~15.2.9",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }

[codingsamuel]

A temporary fix would be:

"@babel/generator": "7.22.5",
"@babel/parser": "7.22.5",
"@babel/traverse": "7.22.5"

[mbenzenhoefer]

I have the same issue with v15.2.9

[beohoang98]

I have same issue on ~14.2.0