angular-cli: Project cannot be build `Cannot read properties of undefined (reading 'file')`
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
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 24
- Comments: 36 (2 by maintainers)
Wait 10 minutes, I’m releasing a Babel patch (7.22.8 of
@babel/coreand@babel/traverse) that hopefully fixes this.A temporary fix would be:
“@babel/generator”: “7.22.5”, “@babel/parser”: “7.22.5”, “@babel/traverse”: “7.22.5”
As suggested here - https://github.com/babel/babel/issues/15752
Can you try and add this to package.json “overrides”: { “@babel/traverse”: “7.22.6” },
Babel 7.22.8 released – the steps listed in the original issue description (https://github.com/angular/angular-cli/issues/25496#issue-1791213810) now succesfully create and build an Angular project.
Please make sure to update
@babel/coreand@babel/traverseto 7.22.8!This issue has been caused
@babel/traverse@7.22.7, the Babel team has reverted the change that caused this bug via https://github.com/babel/babel/pull/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.jsonand sync the lock file. The easier way would be to deletenode_modules,yarn.lockandpackage-lock.json.Windows users:
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.
Closing as this issue has been resolved upstream and confirmed that the fix works. See: https://github.com/angular/angular-cli/issues/25496#issuecomment-1623604147.
Same for us (latest Angular 13)
I have the same issue with
v15.2.9I have the same issue with Angular 14.
Maybe related to a babel dependecy which was uploaded an hour ago?
use pnpm i and found this waring, use the overrides and it fixed
Getting same issue in Angular 15.2.9
I have same issue on
~14.2.0try deleting node_modules and
npm installand thenng serveit will work 👯♂️I am also facing the same issue when I created new project but for older created projects the issue is not there.
I am facing this issue too.
Checked this in v15 and v16
This seems to be indeed caused by a change (intentional or not) in Babel which is breaking the Angular linker.
path.hubwhich 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.