The error occurs when executing ionic serve, or ng build, I have tried to delete the node_modules folder and to do npm install but it does not solve it, I have updated angular and installed a new version, just like ionic, I have created a new project 30 times and it keeps happening. It only happens in new projects, if I run one created a few days ago it starts correctly.
PS C:\Users\Diego Ruiz\Documents\Ionic\Test> ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[ng] - Generating browser application bundles (phase: setup)...
[ng] ✔ Browser application bundle generation complete.
[ng] Initial Chunk Files | Names | Raw Size
[ng] vendor.js | vendor | 1.52 MB |
[ng] polyfills.js | polyfills | 336.74 kB |
[ng] styles.css, styles.js | styles | 276.28 kB |
[ng] runtime.js | runtime | 12.60 kB |
[ng] main.js | main | 9.40 kB |
[ng]
[ng] | Initial Total | 2.14 MB
[ng]
[ng] Lazy Chunk Files | Names | Raw Size
[ng] src_app_home_home_module_ts.js | home-home-module | 16.29 kB |
[ng]
[ng] Build at: 2023-07-06T11:52:05.804Z - Hash: 61f55ddf07abee36 - Time: 12273ms
[ng]
[ng] ./node_modules/@angular/common/fesm2022/common.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
[ng] TypeError: C:\Users\Diego Ruiz\Documents\Ionic\Test\node_modules\@angular\common\fesm2022\common.mjs: Cannot read properties of undefined (reading 'file')
[ng]
[ng] ./node_modules/@angular/forms/fesm2022/forms.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
[ng] TypeError: C:\Users\Diego Ruiz\Documents\Ionic\Test\node_modules\@angular\forms\fesm2022\forms.mjs: Cannot read properties of undefined (reading 'file')
[ng]
[ng] ./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):
[ng] TypeError: C:\Users\Diego Ruiz\Documents\Ionic\Test\node_modules\@angular\platform-browser\fesm2022\platform-browser.mjs: Cannot read properties of undefined (reading 'file')
[ng]
[ng] ./node_modules/@angular/router/fesm2022/router.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
[ng] TypeError: C:\Users\Diego Ruiz\Documents\Ionic\Test\node_modules\@angular\router\fesm2022\router.mjs: Cannot read properties of undefined (reading 'file')
[ng]
[ng] ./node_modules/@ionic/angular/fesm2020/ionic-angular.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/tools/babel/webpack-loader.js):
[ng] TypeError: C:\Users\Diego Ruiz\Documents\Ionic\Test\node_modules\@ionic\angular\fesm2020\ionic-angular.mjs: Cannot read properties of undefined (reading 'file')
[ng]
[ng]
[ng] × Failed to compile.
[INFO] Development server running!
Local: http://localhost:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
package.json
{
"name": "Test",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
"@capacitor/app": "5.0.5",
"@capacitor/core": "5.1.1",
"@capacitor/haptics": "5.0.5",
"@capacitor/keyboard": "5.0.5",
"@capacitor/status-bar": "5.0.5",
"@ionic/angular": "^7.0.0",
"ionicons": "^7.0.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.0.0",
"@angular-eslint/builder": "^16.0.0",
"@angular-eslint/eslint-plugin": "^16.0.0",
"@angular-eslint/eslint-plugin-template": "^16.0.0",
"@angular-eslint/schematics": "^16.0.0",
"@angular-eslint/template-parser": "^16.0.0",
"@angular/cli": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/compiler-cli": "^16.0.0",
"@angular/language-service": "^16.0.0",
"@capacitor/cli": "5.1.1",
"@ionic/angular-toolkit": "^9.0.0",
"@types/jasmine": "~4.3.0",
"@types/node": "^12.11.1",
"@typescript-eslint/eslint-plugin": "5.3.0",
"@typescript-eslint/parser": "5.3.0",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~4.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"ts-node": "^8.3.0",
"typescript": "~5.0.2"
},
"description": "An Ionic project"
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": ["src/theme/variables.scss", "src/global.scss"],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"development": {
"browserTarget": "app:build:development"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": ["src/theme/variables.scss", "src/global.scss"],
"scripts": []
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
}
},
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
]
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
>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 !