Open Closed

Error: Module parse failed: Unexpected token (1:10) #9751


User avatar
0
rmudavath created

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)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent

    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:

    1. Check Your Imports

      • Make sure you are not directly importing any .js.map files in your codebase. Search for any import statements like import ... from '.../zu.js.map' and remove them.
    2. Update angular.json Assets Configuration

      • In your angular.json, ensure you are not copying .js.map files from node_modules or assets into your build output. Only copy the necessary files (e.g., images, CSS, JS), not source maps.

      Example:

    "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.
    1. Update tsconfig.json Exclude
      • Your tsconfig.json should exclude .js.map files, but this only affects TypeScript compilation, not Webpack. Still, keep:
    "exclude": [
         "**/*.spec.ts",
         "**/*.js.map",
         "node_modules"
       ]
    
    1. Clean and Reinstall
      • Delete node_modules, package-lock.json, and dist folders.
      • Run:
    npm cache clean --force
         npm install --legacy-peer-deps
    
    1. 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.
    2. 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.
    3. 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.

  • User Avatar
    0
    rmudavath created

    AI response does not help

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Our angular team will check this.

    Thanks.

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    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.

Learn More, Pay Less
33% OFF
All Trainings!
Get Your Deal
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on September 12, 2025, 10:20