Getting the below error
./node_modules/@angular/common/locales/zu.js.map:1:10 - Error: Module parse failed: Unexpected token (1:10) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
{"version":3,"file":"zu.js","sourceRoot":"","sources":["zu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file
I looking into ABP-Angular--Error-Module-parse-failed , I belie its the same error - but didn't find any solution.
Already tried, couple of times
rm -rf node_modules package-lock.json npm cache clean --force npm install --legacy-peer-deps
Tied excluding below in my tsconfig..json , "exclude": [ "/*.spec.ts", "/.js.map", "**/.js", "node_modules" ]
Below is snippet of m angular.json for reference
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"MYPROJECT3": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/CROMS3",
"main": "src/main.ts",
"index": "src/index.html",
"polyfills": [
"src/polyfills.ts"
],
"tsConfig": "tsconfig.app.json",
"allowedCommonJsDependencies": [
"stream-browserify",
"@ant-design/colors",
"chart.js",
"js-sha256",
"@uppy/xhr-upload",
"@uppy/dashboard",
"@uppy/core"
],
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/leaflet/dist/images",
"output": "/assets/leaflet/images"
},
"src/manifest.webmanifest",
"src/web.config"
],
"styles": [
Below is my package.json
{
"name": "croms3",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --open",
"start-s": "ng serve --watch",
"local": "ng serve --open --configuration local",
"build": "ng build",
"build:qa": "ng build --configuration qa",
"build:dev-azure": "ng build --configuration dev-azure",
"build:qa-azure": "ng build --configuration qa-azure",
"build:uat-azure": "ng build --configuration uat-azure",
"build:prod-azure": "ng build --configuration prod-azure",
"build:dev-kiosk": "ng build --configuration dev-kiosk",
"build:qa-kiosk": "ng build --configuration qa-kiosk",
"build:uat-kiosk": "ng build --configuration uat-kiosk",
"build:prod-kiosk": "ng build --configuration prod-kiosk",
"build:uat": "ng build --configuration uat",
"build:prod": "ng build --configuration production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "patch-package"
},
"private": true,
"dependencies": {
"@abp/ng.components": "9.2.3",
"@abp/ng.core": "9.2.3",
"@abp/ng.identity": "9.2.3",
"@abp/ng.setting-management": "9.2.3",
"@abp/ng.theme.shared": "9.2.3",
"@abp/signalr": "9.2.3",
"@angular/animations": "~19.2.6",
"@angular/cdk": "^19.2.6",
"@angular/common": "~19.2.6",
"@angular/compiler": "~19.2.6",
"@angular/core": "~19.2.6",
"@angular/forms": "~19.2.6",
"@angular/localize": "~19.2.6",
"@angular/platform-browser": "~19.2.6",
"@angular/platform-browser-dynamic": "~19.2.6",
"@angular/router": "~19.2.6",
"@angular/service-worker": "~19.2.6",
"@fjsc/ng2-dnd-list": "^1.0.4",
"@fortawesome/fontawesome-free": "^5.14.0",
"@microsoft/signalr": "^7.0.2",
"@ng-bootstrap/ng-bootstrap": "^18.0.0",
"@ng-select/ng-select": "^14.9.0",
"@ngxs/store": "^19.0.0",
"@swimlane/ngx-datatable": "^20.1.0",
"@types/esri-leaflet": "^2.1.6",
"@types/leaflet": "^1.5.23",
"@volo/abp.commercial.ng.ui": "9.2.3",
"@volo/abp.ng.account": "9.2.3",
"@volo/abp.ng.audit-logging": "9.2.3",
"@volo/abp.ng.identity": "9.2.3",
"@volo/abp.ng.identity-server": "9.2.3",
"@volo/abp.ng.language-management": "9.2.3",
"@volo/abp.ng.saas": "9.2.3",
"@volo/abp.ng.text-template-management": "9.2.3",
"@volo/abp.ng.theme.lepton": "9.2.3",
"angular-oauth2-oidc": "^15.0.1",
"angularx-qrcode": "^19.0.0",
"blob-util": "^2.0.2",
"broadcast-channel": "^7.1.0",
"buffer": "^6.0.3",
"esri-leaflet": "^3.0.17",
"esri-leaflet-geocoder": "^3.1.6",
"file-saver": "^2.0.5",
"leaflet-easyprint": "^2.1.9",
"leaflet-simple-map-screenshoter": "^0.4.2",
"localforage": "^1.9.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"ng-multiselect-dropdown": "^1.0.0",
"ng-zorro-antd": "^19.3.1",
"ngx-bootstrap": "^6.2.0",
"ngx-cookie-service": "^19.0.0",
"ngx-daterangepicker-material": "^6.0.4",
"ngx-mask": "^14.2.4",
"ngx-material-timepicker": "^5.5.3",
"ngx-spinner": "^19.0.0",
"ngx-time-mask": "^1.0.1",
"ngx-webcam": "^0.4.1",
"powerbi-client": "^2.23.1",
"powerbi-client-angular": "^5.0.0",
"rxjs": "^7.8.2",
"tslib": "^2.8.1",
"webcam-easy": "^1.0.5",
"xml-js": "1.6.11",
"zone.js": "~0.15.1"
},
"devDependencies": {
"@abp/ng.schematics": "9.2.3",
"@angular-devkit/build-angular": "~19.2.6",
"@angular/cli": "~19.2.6",
"@angular/compiler-cli": "~19.2.6",
"@angular/language-service": "~19.2.6",
"@types/google.maps": "^3.58.1",
"@types/googlemaps": "3.39.12",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/jest": "^30.0.0",
"@types/lodash": "^4.17.20",
"@types/node": "^12.11.1",
"angular-eslint": "19.8.1",
"crypto-browserify": "^3.12.1",
"eslint": "^9.29.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"ng-packagr": "~19.2.0",
"patch-package": "^8.0.0",
"postinstall-postinstall": "^2.1.0",
"protractor": "~7.0.0",
"rollup-plugin-node-polyfills": "^0.2.1",
"stream-browserify": "^3.0.0",
"ts-node": "~8.3.0",
"typescript": "~5.6.2",
"typescript-eslint": "8.34.1"
}
}
4 Answer(s)
-
0
To resolve the error:
Error: Module parse failed: Unexpected token (1:10) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > {"version":3,"file":"zu.js","sourceRoot":"","sources":["zu.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;...
This is caused by Webpack trying to import a
.js.map
file as a JavaScript module, which is not valid. This usually happens if your build process is accidentally including source map files as modules.Solution Steps:
Check Your Imports
- Make sure you are not directly importing any
.js.map
files in your codebase. Search for any import statements likeimport ... from '.../zu.js.map'
and remove them.
- Make sure you are not directly importing any
Update
angular.json
Assets Configuration- In your
angular.json
, ensure you are not copying.js.map
files fromnode_modules
orassets
into your build output. Only copy the necessary files (e.g., images, CSS, JS), not source maps.
Example:
- In your
"assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "node_modules/leaflet/dist/images", "output": "/assets/leaflet/images" } ]
- Do not use a glob pattern that matches
.js.map
files unless you specifically need them.
- Update
tsconfig.json
Exclude- Your
tsconfig.json
should exclude.js.map
files, but this only affects TypeScript compilation, not Webpack. Still, keep:
- Your
"exclude": [ "**/*.spec.ts", "**/*.js.map", "node_modules" ]
- Clean and Reinstall
- Delete
node_modules
,package-lock.json
, anddist
folders. - Run:
- Delete
npm cache clean --force npm install --legacy-peer-deps
Check for Custom Webpack Config
- If you are using a custom Webpack configuration, ensure you are not including
.js.map
files as entry points or modules.
- If you are using a custom Webpack configuration, ensure you are not including
Check for Third-Party Library Issues
- Sometimes, a third-party library may incorrectly reference a
.js.map
file. If the error points to a specific library, check its issues or update to the latest version.
- Sometimes, a third-party library may incorrectly reference a
Verify Angular and ABP Package Versions
- Ensure all your Angular and ABP packages are compatible and at the same major/minor version.
References:
This approach aligns with common ABP and Angular project conventions for asset and build configuration.
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
AI response does not help
-
0
hi
Our angular team will check this.
Thanks.
-
0
Hello,
We suggest you to use angular version
~19.0.0
, or~19.1.0
for this version of ABP if you do not have a special occasion.