search

VadimDez / ng2-pdf-viewer

📄 PDF Viewer Component for Angular
https://vadimdez.github.io/ng2-pdf-viewer/
MIT License
1.29k stars 418 forks source link

Getting module parse failed: Unexpected token error. #803

Closed akshaykatale99 closed 2 years ago

akshaykatale99 commented 3 years ago

Getting module parse failed error while building ionic app.

ERROR in ./node_modules/pdfjs-dist/build/pdf.js 2413:45
Module parse failed: Unexpected token (2413:45)
You may need an appropriate loader to handle this file type.
|         intent: renderingIntent,
|         renderInteractiveForms: renderInteractiveForms === true,
>         annotationStorage: annotationStorage?.getAll() || null
|       });
|     }
ERROR in ./node_modules/pdfjs-dist/web/pdf_viewer.js 895:20
Module parse failed: Unexpected token (895:20)
You may need an appropriate loader to handle this file type.
|     this._on(eventName, listener, {
|       external: true,
>       once: options?.once
|     });
|   }

here is my package.json

{
  "name": "learntezapp",
  "version": "0.0.2",
  "author": "Akshay Katale",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "release": "ionic cordova build android --aot --prod --release",
    "bundle": "ionic cordova build android --aot --prod --release -- -- --packageType=bundle"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.16",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.16",
    "@angular/core": "^7.2.16",
    "@angular/fire": "^5.3.0",
    "@angular/forms": "^7.2.16",
    "@angular/http": "^7.2.16",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.16",
    "@angular/platform-browser-dynamic": "^7.2.16",
    "@angular/router": "^7.2.16",
    "@ionic-native/android-permissions": "^5.22.0",
    "@ionic-native/app-version": "^5.21.0",
    "@ionic-native/background-mode": "^5.29.0",
    "@ionic-native/camera": "^5.29.0",
    "@ionic-native/clipboard": "^5.23.0",
    "@ionic-native/core": "^5.21.0",
    "@ionic-native/date-picker": "^5.21.0",
    "@ionic-native/deeplinks": "^5.21.0",
    "@ionic-native/downloader": "^5.28.0",
    "@ionic-native/facebook": "^5.21.0",
    "@ionic-native/file": "^5.21.0",
    "@ionic-native/file-chooser": "^5.21.0",
    "@ionic-native/file-transfer": "^5.29.0",
    "@ionic-native/geolocation": "^5.21.0",
    "@ionic-native/google-plus": "^5.21.0",
    "@ionic-native/in-app-browser": "^5.22.0",
    "@ionic-native/insomnia": "^5.24.0",
    "@ionic-native/ionic-webview": "^5.31.1",
    "@ionic-native/keyboard": "^5.21.0",
    "@ionic-native/local-notifications": "^5.21.0",
    "@ionic-native/native-storage": "^5.21.0",
    "@ionic-native/network": "^5.21.0",
    "@ionic-native/preview-any-file": "^5.28.0",
    "@ionic-native/push": "^5.24.0",
    "@ionic-native/screen-orientation": "^5.26.0",
    "@ionic-native/social-sharing": "^5.21.0",
    "@ionic-native/spinner-dialog": "^5.21.0",
    "@ionic-native/splash-screen": "^5.21.0",
    "@ionic-native/sqlite": "^5.32.1",
    "@ionic-native/status-bar": "^5.21.0",
    "@ionic-native/streaming-media": "^5.27.0",
    "@ionic-native/youtube-video-player": "^5.28.0",
    "@ionic-native/zoom": "^5.30.0",
    "@ionic/angular": "^4.11.10",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@tinymce/tinymce-angular": "^4.2.3",
    "@types/jquery": "^3.5.5",
    "angular-calendar": "^0.26.11",
    "angular-froala-wysiwyg": "^3.2.7",
    "chart.js": "^2.9.4",
    "cordova-browser": "^6.0.0",
    "cordova-clipboard": "^1.3.0",
    "cordova-ios": "5.1.1",
    "cordova-plugin-add-swift-support": "2.0.2",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-app-version": "0.1.9",
    "cordova-plugin-background-mode": "^0.7.3",
    "cordova-plugin-badge": "0.8.8",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-datepicker": "0.9.3",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filechooser": "1.2.0",
    "cordova-plugin-googleplus": "7.0.1",
    "cordova-plugin-inappbrowser": "3.0.0",
    "cordova-plugin-insomnia": "^4.3.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^3.1.2",
    "cordova-plugin-local-notification": "0.9.0-beta.2",
    "cordova-plugin-native-spinner": "1.1.3",
    "cordova-plugin-nativestorage": "2.3.2",
    "cordova-plugin-network-information": "2.0.1",
    "cordova-plugin-preview-any-file": "^0.1.7",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-streaming-media": "^2.3.0",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-plugin-x-socialsharing": "5.4.4",
    "cordova-rtsp-rtmp-stream": "^0.1.24",
    "cordova-support-google-services": "^1.4.1",
    "core-js": "^2.6.12",
    "crypto-js": "^3.1.9-1",
    "date-fns": "^1.30.1",
    "es6-promise-plugin": "4.2.2",
    "firebase": "^7.24.0",
    "ionic-context-menu": "^1.0.2",
    "ionic-plugin-deeplinks": "1.0.20",
    "ionic2-calendar": "^0.5.8",
    "jquery": "^3.6.0",
    "jszip": "^3.6.0",
    "ng-lazyload-image": "^5.1.2",
    "ng-lottie": "^0.3.2",
    "ng-multiselect-dropdown": "^0.2.14",
    "ng2-charts": "^2.4.2",
    "ng2-pdf-viewer": "^6.0.0",
    "ngx-ionic-image-viewer": "^0.7.4",
    "ngx-plyr": "^4.0.0",
    "ngx-spinner": "^7.2.0",
    "npm": "^6.14.13",
    "phonegap-plugin-multidex": "1.0.0",
    "phonegap-plugin-push": "^2.3.0",
    "plyr": "^3.6.8",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "safe-json-parse": "^4.0.0",
    "videojs-youtube": "^2.6.1",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "^7.2.16",
    "@angular/compiler-cli": "^7.2.16",
    "@angular/language-service": "^7.2.16",
    "@ionic/angular-toolkit": "~1.3.0",
    "@types/crypto-js": "^3.1.43",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.9",
    "@types/node": "^10.17.60",
    "codelyzer": "~4.5.0",
    "cordova-android": "git+https://github.com/apache/cordova-android.git",
    "cordova-plugin-fullscreen": "^1.3.0",
    "cordova-plugin-lt-drm": "git+https://github.com/akshaykatale99/ionic-drm.git",
    "cordova-plugin-youtube-video-player": "git+https://github.com/akshaykatale99/CordovaYoutubeVideoPlayer.git",
    "cordova-sqlite-storage": "^5.1.0",
    "integrator-cordova-plugin-downloader": "git+https://github.com/akshaykatale99/integrator-cordova-plugin-downloader.git",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.12.0",
    "protractor": "^5.4.3",
    "ts-node": "^8.0.3",
    "tslint": "~5.12.0",
    "typescript": "^3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-file": {},
      "cordova-plugin-filechooser": {},
      "cordova-plugin-native-spinner": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-googleplus": {
        "WEB_APPLICATION_CLIENT_ID": "899581507447-oann4rdgiseciqbuafugrdor2osliv7s.apps.googleusercontent.com",
        "PLAY_SERVICES_VERSION": "11.8.0+"
      },
      "cordova-plugin-x-socialsharing": {
        "ANDROID_SUPPORT_V4_VERSION": "24.1.1+"
      },
      "ionic-plugin-deeplinks": {
        "URL_SCHEME": "learntezapp",
        "DEEPLINK_SCHEME": "https",
        "DEEPLINK_HOST": "learntez.com",
        "ANDROID_PATH_PREFIX": "/",
        "ANDROID_2_PATH_PREFIX": "/",
        "ANDROID_3_PATH_PREFIX": "/",
        "ANDROID_4_PATH_PREFIX": "/",
        "ANDROID_5_PATH_PREFIX": "/",
        "DEEPLINK_2_SCHEME": " ",
        "DEEPLINK_2_HOST": " ",
        "DEEPLINK_3_SCHEME": " ",
        "DEEPLINK_3_HOST": " ",
        "DEEPLINK_4_SCHEME": " ",
        "DEEPLINK_4_HOST": " ",
        "DEEPLINK_5_SCHEME": " ",
        "DEEPLINK_5_HOST": " "
      },
      "cordova-plugin-app-version": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-datepicker": {},
      "cordova-plugin-android-permissions": {},
      "cordova-clipboard": {},
      "phonegap-plugin-push": {
        "ANDROID_SUPPORT_V13_VERSION": "27.+",
        "FCM_VERSION": "17.0.+"
      },
      "cordova-support-google-services": {},
      "cordova-plugin-insomnia": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-streaming-media": {},
      "cordova-rtsp-rtmp-stream": {},
      "integrator-cordova-plugin-downloader": {},
      "cordova-plugin-preview-any-file": {},
      "cordova-plugin-background-mode": {},
      "cordova-plugin-camera": {
        "CAMERA_USAGE_DESCRIPTION": "Take a pic",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "Choose",
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-lt-drm": {},
      "cordova-plugin-youtube-video-player": {},
      "cordova-plugin-fullscreen": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-add-swift-support": {}
    },
    "platforms": [
      "browser",
      "android",
      "ios"
    ]
  }
}
xavidram commented 3 years ago

Getting the same issue when building with flag --aot

donmb1 commented 3 years ago

+1

vtn-dev2016 commented 3 years ago

+++++1 Who have ways to resolve this error?

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

LAlves91 commented 2 years ago

Greetings @akshaykatale99

If you are still experiencing this problem, can you please confirm in your package-lock.json the installed versions of ng2-pdf-viewer and pdfjs-dist?

I believe what's happening is: there's a mismatch between installed versions of these two libraries, causing ng2-pdf-viewer to use the wrong files from pdfjs-dist (they basically have two folders, one with modern JS and a legacy one, which I think is de one to be used).

As your project is trying to use the modern JS from pdfjs-dist, the line annotationStorage: annotationStorage?.getAll() || null is problematic because of the Optional Chaining operator.

Cheers!

xavidram commented 2 years ago

pdfjs-dist: ^2.5.207 ng2-pdfjs-viewer: ^5.0.7

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Bhavik2712 commented 9 months ago

Error: ./node_modules/ng2-pdfjs-viewer/fesm2022/ng2-pdfjs-viewer.mjs 6:10 Module parse failed: Unexpected token (6: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 | | class PdfJsViewerComponent {

iframe;

| static lastID = 0; | viewerId = ng2-pdfjs-viewer-ID${++PdfJsViewerComponent.lastID};

i got this error please share a solution (if anybody have )

Bhavik2712 commented 9 months ago

Error: ./node_modules/ng2-pdfjs-viewer/fesm2022/ng2-pdfjs-viewer.mjs 6:10 Module parse failed: Unexpected token (6: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 | | class PdfJsViewerComponent {

iframe;

| static lastID = 0; | viewerId = ng2-pdfjs-viewer-ID${++PdfJsViewerComponent.lastID};