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

ms270169 · 2023-07-06T09:54:29Z

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

The text was updated successfully, but these errors were encountered:

codingsamuel · 2023-07-06T10:07:02Z

I have the same issue with Angular 14.

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

alan-agius4 · 2023-07-06T10:19:15Z

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 · 2023-07-06T10:25:43Z

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 · 2023-07-06T10:28:05Z

A temporary fix would be:

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

mbenzenhoefer · 2023-07-06T10:34:44Z

I have the same issue with v15.2.9

beohoang98 · 2023-07-06T10:59:17Z

I have same issue on ~14.2.0

hambra · 2023-07-06T11:12:01Z

same here with v16 :(

Rahul-kalsha · 2023-07-06T11:16:59Z

Getting same issue in Angular 15.2.9

meraj-markettime · 2023-07-06T11:20:18Z

Getting same issue in Angular 15.2.9

thaoula · 2023-07-06T11:40:29Z

As suggested here -
babel/babel#15752

Can you try and add this to package.json
"overrides": {
"@babel/traverse": "7.22.6"
},

thanoskoutr · 2023-07-06T11:40:29Z

Getting the same issue with latest Angular v14 (14.2.12).

hambra · 2023-07-06T11:51:00Z

live example for angular also failing with the same error
https://stackblitz.com/run?file=src%2Fapp%2Fapp.component.html

Alfxjx · 2023-07-06T11:54:07Z

WARN deprecated @babel/traverse@7.22.7: [WARNING] Use 7.22.6 instead of 7.22.7, reason: babel/babel#15752

use pnpm i and found this waring, use the overrides and it fixed

"overrides": {
  "@babel/traverse": "7.22.6"
},

Sapython · 2023-07-06T11:54:25Z

I am facing this issue too.

Checked this in v15 and v16

VKAlwaysWin · 2023-07-06T11:59:33Z

Same for us (latest Angular 13)

prnkrawat · 2023-07-06T12:01:01Z

I am also facing this issue while creating the new project.

VedantBTS · 2023-07-06T12:12:59Z

I am also facing the same issue when I created new project but for older created projects the issue is not there.

Isabelcasmot · 2023-07-06T12:21:50Z

I have the same issue and I tried the :
"overrides": {
"@babel/traverse": "7.22.6"
},

on package.json but is not working

vampirepapi · 2023-07-06T12:24:59Z

I have the same issue and I tried the : "overrides": { "@babel/traverse": "7.22.6" },

on package.json but is not working

try deleting node_modules and npm install and then ng serve
it will work 👯‍♂️

Isabelcasmot · 2023-07-06T12:27:36Z

I tried tha also, the issue is still there :(

VedantBTS · 2023-07-06T12:28:34Z

I also tried by deleting node_modules and npm install and then ng serve, but it's not working for me too

nicolo-ribaudo · 2023-07-06T12:29:19Z

Wait 10 minutes, I'm releasing a Babel patch (7.22.8 of @babel/core and @babel/traverse) that hopefully fixes this.

vampirepapi · 2023-07-06T12:29:56Z

strange, worked for me btw

vampirepapi · 2023-07-06T12:30:39Z

jcbuilds · 2023-07-06T12:30:54Z

I'm also facing the same issue with Angular 15.1.6.

alan-agius4 · 2023-07-06T12:34:55Z

This issue has been caused @babel/traverse@7.22.7, the Babel team has reverted the change that caused this bug via babel/babel#15754 and released a new version @babel/traverse@7.22.8. (Thanks @nicolo-ribaudo).

Please ensure to remove NPM "overrides" and Yarn "resolutions" from your package.json and sync the lock file. The easier way would be to delete node_modules, yarn.lock and package-lock.json.

$ rm -rf node_modules yarn.lock package-lock.json

Windows users:

npx rimraf -rf node_modules yarn.lock package-lock.json

If after the above you are are still encountering this problem and you are not using the public NPM repository, make sure that your NPM mirror is synced.

nicolo-ribaudo · 2023-07-06T12:37:13Z

Babel 7.22.8 released -- the steps listed in the original issue description (#25496 (comment)) now succesfully create and build an Angular project.

Please make sure to update @babel/core and @babel/traverse to 7.22.8!

ocombe · 2023-07-06T12:40:56Z

Babel 7.22.8 released -- the steps listed in the original issue description (#25496 (comment)) now succesfully create and build an Angular project.

Please make sure to update @babel/core and @babel/traverse to 7.22.8!

I can confirm that it works now with the new version of babel traverse (automatically installed, no need to change anything to the original config)

alan-agius4 · 2023-07-06T12:42:34Z

Closing as this issue has been resolved upstream and confirmed that the fix works.
See: #25496 (comment).

janpauldahlke · 2023-07-06T15:33:53Z

quick reaction. gj and ty

angular-automatic-lock-bot · 2023-08-12T00:08:44Z

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.}

This was referenced Jul 6, 2023

ng client - Cannot read properties of undefined (reading 'file') angular/angular#50959

Closed

New angular app is not running angular/angular#50960

Closed

alan-agius4 added area: @angular-devkit/build-angular freq4: critical labels Jul 6, 2023

alan-agius4 changed the title ~~New Angular 16.1.0 project cannot be build~~ New Angular 16.1.0 project cannot be build Cannot read properties of undefined (reading 'file') Jul 6, 2023

alan-agius4 added severity5: regression devkit/build-angular:browser type: bug/fix labels Jul 6, 2023

alan-agius4 mentioned this issue Jul 6, 2023

[Bug]: Cannot read properties of undefined (reading 'addHelper') babel/babel#15752

Closed

1 task

arluko mentioned this issue Jul 6, 2023

Angular 15, build failing "Cannot read properties of undefined (reading 'file')" #25497

Closed

1 task

waxthevan mentioned this issue Jul 6, 2023

Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js): Cannot read properties of undefined (reading 'file') angular/angular#50961

Closed

alan-agius4 changed the title ~~New Angular 16.1.0 project cannot be build Cannot read properties of undefined (reading 'file')~~ Project cannot be build Cannot read properties of undefined (reading 'file') Jul 6, 2023

alan-agius4 added the state: blocked on upstream label Jul 6, 2023

valentinpalkovic mentioned this issue Jul 6, 2023

[Bug]: Storybook cannot build in Angular projects - Cannot read properties of undefined (reading 'file') storybookjs/storybook#23337

Closed

Sapython mentioned this issue Jul 6, 2023

[Bug]:Cannot read property 'file' of undefined babel/babel#15753

Closed

1 task

This comment was marked as outdated.

Sign in to view

alan-agius4 removed the state: blocked on upstream label Jul 6, 2023

This comment was marked as resolved.

Sign in to view

This comment was marked as outdated.

Sign in to view

This comment was marked as resolved.

Sign in to view

alan-agius4 closed this as completed Jul 6, 2023

nicolo-ribaudo mentioned this issue Jul 6, 2023

Revert "Use NodePath#hub as part of the paths cache key" babel/babel#15754

Merged

alan-agius4 mentioned this issue Jul 6, 2023

Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js): #25498

Closed

1 task

This was referenced Jul 6, 2023

Bump semver dependency to >= 7.5.2 babel/babel-loader#994

Closed

Unable to build Angular project with Jose panva/jose#549

Closed

tvanier mentioned this issue Jul 17, 2023

chore(deps-dev): bump @babel/preset-env from 7.22.7 to 7.22.9 tvanier/sport-visioner#424

Merged

angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 12, 2023

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

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

Comments

ms270169 commented Jul 6, 2023 • edited Loading

Command

Is this a regression?

The previous version in which this bug was not present was

Description

Minimal Reproduction

Exception or Error

Your Environment

Anything else relevant?

codingsamuel commented Jul 6, 2023

alan-agius4 commented Jul 6, 2023 • edited Loading

CondensedMilk7 commented Jul 6, 2023

codingsamuel commented Jul 6, 2023

mbenzenhoefer commented Jul 6, 2023

beohoang98 commented Jul 6, 2023

hambra commented Jul 6, 2023

Rahul-kalsha commented Jul 6, 2023

meraj-markettime commented Jul 6, 2023

thaoula commented Jul 6, 2023

thanoskoutr commented Jul 6, 2023

hambra commented Jul 6, 2023 • edited Loading

Alfxjx commented Jul 6, 2023 • edited Loading

Sapython commented Jul 6, 2023

VKAlwaysWin commented Jul 6, 2023

prnkrawat commented Jul 6, 2023

VedantBTS commented Jul 6, 2023

Isabelcasmot commented Jul 6, 2023

vampirepapi commented Jul 6, 2023

Isabelcasmot commented Jul 6, 2023

VedantBTS commented Jul 6, 2023

nicolo-ribaudo commented Jul 6, 2023

vampirepapi commented Jul 6, 2023

vampirepapi commented Jul 6, 2023

jcbuilds commented Jul 6, 2023

alan-agius4 commented Jul 6, 2023 • edited Loading

This comment was marked as outdated.

This comment was marked as resolved.

This comment was marked as outdated.

nicolo-ribaudo commented Jul 6, 2023

This comment was marked as resolved.

ocombe commented Jul 6, 2023 • edited Loading

This comment was marked as resolved.

alan-agius4 commented Jul 6, 2023 • edited Loading

janpauldahlke commented Jul 6, 2023 • edited Loading

angular-automatic-lock-bot bot commented Aug 12, 2023

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

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

ms270169 commented Jul 6, 2023 •

edited

Loading

alan-agius4 commented Jul 6, 2023 •

edited

Loading

hambra commented Jul 6, 2023 •

edited

Loading

Alfxjx commented Jul 6, 2023 •

edited

Loading

alan-agius4 commented Jul 6, 2023 •

edited

Loading

ocombe commented Jul 6, 2023 •

edited

Loading

alan-agius4 commented Jul 6, 2023 •

edited

Loading

janpauldahlke commented Jul 6, 2023 •

edited

Loading