Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Angular. ng serve. Module build failed. Cannot read properties of undefined (reading 'file')

I have the following error when running "ng serve":

./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: C:\Users\sheil\Desktop\Temp\angular-tut\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: C:\Users\sheil\Desktop\Temp\angular-tut\node_modules@angular\platform-browser\fesm2022\platform-browser.mjs: Cannot read properties of undefined (reading ‘file’)

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

./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: C:\Users\sheil\Desktop\Temp\angular-tut\node_modules@angular\router\fesm2022\router.mjs: Cannot read properties of undefined (reading ‘file’)

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Ă— Failed to compile.

My package.json:

{
  "name": "angular-tut",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/forms": "^16.1.0",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.3",
    "@angular/cli": "~16.1.3",
    "@angular/compiler-cli": "^16.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

>Solution :

It’s known issue related to @babel/traverse.


The temporary workaround is to override the dependency in `package.json` :

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



A fix is being worked on by the babel team, the issue can be [tracked here][2].


Edit:
babel 7.22.8 has been published. Delete your package-lock and do a clean install !

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading