Error in ./~/jspdf/dist/jspdf.es.min.js

[zhengyx950211]

Module parse failed: node_modules\jspdf\dist\jspdf.es.min.js Unexpected token (207:77) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (207:77)

[HackbrettXXX]

Please provide more contextual information: which jsPDF version, which build tool (+version), which plugins (+versions).

[MorenoAlex]

Having the same problem here.

jsPDF 2.3.0 (installed through npm) Angular 7

ERROR in ./node_modules/jspdf/dist/jspdf.es.min.js 207:77 Module parse failed: Unexpected token (207:77) You may need an appropriate loader to handle this file type.

[HackbrettXXX]

I assume Angular 7 does not support import(...) expressions. Maybe upgrade Angular?

[MorenoAlex]

I assume Angular 7 does not support import(...) expressions. Maybe upgrade Angular?

Not possible unfortunately. The project is a bit complex and upgrading it will set me off the project roadmap.

jsPDF 1.5.3 seems to be working though. Unfortunatly I needed to use the addSvgAsImage function, which did not exist in 1.x. I will use a workarround with canvg.

[HackbrettXXX]

What you also might try is to replace the .es.min.js file with the .umd.min.js file during the build.

[linsera1809]

I was stuck on this issue for about a week until we just resolved it yesterday. If you're curious, we edited the angular.json file to include a fileReplacement to swap the .es.min.js with the .umd.min.js file in order to get the build to work properly. (Shoutout to @HackbrettXXX for this suggestion)

"fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.test.ts"
              },{
                "replace": "./node_modules/jspdf/dist/jspdf.es.min.js",
                "with": "./node_modules/jspdf/dist/jspdf.umd.min.js"
              }]
            },

For reference, the other options we had were:

1. Upgrade Angular version - includes a lot of work
2. Downgrade to an older version of jsPDF - not ideal
3. Use the umd version of jsPDF - quick fix to get our app to build

Hope this helps anyone else that comes across this issue.

[vikas6894]

this solution might work in build, but when I am locally running the code, it's throwing the below error: ERROR in ./node_modules/jspdf/dist/jspdf.es.min.js 207:77 Module parse failed: Unexpected token (207:77) 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 (Source code omitted for this binary file)

Please help here.

[sdelgado3982]

I am also getting the same error: ERROR in ./node_modules/jspdf/dist/jspdf.es.min.js 207:77 Module parse failed: Unexpected token (207:77) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

I tried @linsera1809 and @HackbrettXXX solutions but it doesn't seem to make a difference. This is my build:

"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/iicm-angular-client", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css", "src/assets/font-awesome-4.7.0/css/font-awesome.min.css", "node_modules/ol/ol.css" ], "scripts": [ "./node_modules/jspdf/dist/jspdf.node.min.js", "./node_modules/jspdf/dist/jspdf.es.min.js", "./node_modules/html2canvas/dist/html2canvas.min.js", "./node_modules/jquery/dist/jquery.min.js", "./node_modules/popper.js/dist/umd/popper.min.js", "./node_modules/bootstrap/dist/js/bootstrap.min.js" ], "es5BrowserSupport": true }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }, { "replace": "./node_modules/jspdf/dist/jspdf.es.min.js", "with": "./node_modules/jspdf/dist/jspdf.umd.min.js" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [{ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }] } } }

[Victoriacsl]

Having the same problem here.

jsPDF 2.3.1 (installed through npm) React 16

./node_modules/jspdf/dist/jspdf.es.min.js 207:77 Module parse failed: Unexpected token (207:77) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

[coderMint]

Hello,

I am using jsPDF v2.3.0, SystemJS loader (as we have a core application that is then injected with a standalone 'library' of an application) and finally, this is for an Angular 10 project

The error that I get is as follows: ERROR Error: Uncaught (in promise): ReferenceError: jsPDF is not defined ReferenceError: jsPDF is not defined

I am facing a slightly different version of the issue but I am guessing the root cause is the same as is being experienced by some people's mentions above.

Attached are the relevant code excerpts:

angular.json's script section for the core application

"scripts": [
  "node_modules/systemjs/dist/system.js",
  "node_modules/jspdf/dist/jspdf.umd.min.js",
  "node_modules/html2canvas/dist/html2canvas.min.js"
]

loader.deps.ts - SystemJS loader configured in the core application

import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

declare const SystemJS: any;

SystemJS.set('jspdf', SystemJS.newModule(jsPDF));
SystemJS.set('html2canvas', SystemJS.newModule(html2canvas));

export default SystemJS;

usage of jsPDF in the 'library' application's component.ts

import { Component, ElementRef, Input, OnInit } from '@angular/core';

// Using this form of 'import' as jspdf should already be imported via the SystemJS loader.
// Additionally, if the approach was wrong, then html2canvas import would've failed too
declare const html2canvas: any;
declare const jsPDF: any;

(window as any).html2canvas = html2canvas;

@Component({
  selector: 'pdf-download',
  templateUrl: './pdf-download.component.html',
  styleUrls: ['./pdf-download.component.scss']
})
export class PdfDownloadComponent implements OnInit {

  @Input() contentToPrint: any;

  constructor() {}

  ngOnInit(): void {
  }

  download(): void {
    console.warn('This is the contentToPrint', this.contentToPrint);
    const DATA = this.contentToPrint;
    html2canvas(DATA).then(canvas => {        
      let fileWidth = 200;
      let fileHeight = canvas.height * fileWidth / canvas.width;

      const FILEURI = canvas.toDataURL('image/png')
      let PDF = new jsPDF('p', 'mm', 'a4');   // <-- THIS right here is where it fails
      let position = 0;
      PDF.addImage(FILEURI, 'PNG', 5, 5, fileWidth, fileHeight)      
      PDF.save('message-history.pdf');
    });   
  }

}

I feel that it might have something to do with the way I am adding the .../jspdf.umd.min.js script in angular.json. Or is there another way to do this?

Thank you

[coderMint]

Hello,

I am using jsPDF v2.3.0, SystemJS loader (as we have a core application that is then injected with a standalone 'library' of an application) and finally, this is for an Angular 10 project

The error that I get is as follows: ERROR Error: Uncaught (in promise): ReferenceError: jsPDF is not defined ReferenceError: jsPDF is not defined

I am facing a slightly different version of the issue but I am guessing the root cause is the same as is being experienced by some people's mentions above.

Attached are the relevant code excerpts:

angular.json's script section for the core application

"scripts": [
  "node_modules/systemjs/dist/system.js",
  "node_modules/jspdf/dist/jspdf.umd.min.js",
  "node_modules/html2canvas/dist/html2canvas.min.js"
]

loader.deps.ts - SystemJS loader configured in the core application

import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';

declare const SystemJS: any;

SystemJS.set('jspdf', SystemJS.newModule(jsPDF));
SystemJS.set('html2canvas', SystemJS.newModule(html2canvas));

export default SystemJS;

usage of jsPDF in the 'library' application's component.ts

import { Component, ElementRef, Input, OnInit } from '@angular/core';

// Using this form of 'import' as jspdf should already be imported via the SystemJS loader.
// Additionally, if the approach was wrong, then html2canvas import would've failed too
declare const html2canvas: any;
declare const jsPDF: any;

(window as any).html2canvas = html2canvas;

@Component({
  selector: 'pdf-download',
  templateUrl: './pdf-download.component.html',
  styleUrls: ['./pdf-download.component.scss']
})
export class PdfDownloadComponent implements OnInit {

  @Input() contentToPrint: any;

  constructor() {}

  ngOnInit(): void {
  }

  download(): void {
    console.warn('This is the contentToPrint', this.contentToPrint);
    const DATA = this.contentToPrint;
    html2canvas(DATA).then(canvas => {        
      let fileWidth = 200;
      let fileHeight = canvas.height * fileWidth / canvas.width;

      const FILEURI = canvas.toDataURL('image/png')
      let PDF = new jsPDF('p', 'mm', 'a4');   // <-- THIS right here is where it fails
      let position = 0;
      PDF.addImage(FILEURI, 'PNG', 5, 5, fileWidth, fileHeight)      
      PDF.save('message-history.pdf');
    });   
  }

}

I feel that it might have something to do with the way I am adding the .../jspdf.umd.min.js script in angular.json. Or is there another way to do this?

Thank you

Ooops, I am just now seeing this issue right here where it mentions to add window.jsPDF = window.jspdf.jsPDF and that seems to make me move forward, but not completely! Nonetheless, this should not be an issue for me anymore.

Thank you for your time!

[HackbrettXXX]

Closing this because it's not really a bug in jsPDF. You can still use it for discussion.

[maronkoders]

Hello. it Seems your suggestions were targeted for angular developers. Unfortunately, i faced the same issue on my vue.js application. How do i configure it to work on my application.

[arvintateyu]

Opening this for discussion as the recommended suggestions have not fixed the issue. I still get the error: ERROR in ./node_modules/jspdf/dist/jspdf.es.min.js 207:77 Module parse failed: Unexpected token (207:77) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

I have done the replacements: "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" },{ "replace": "./node_modules/jspdf/dist/jspdf.es.min.js", "with": "./node_modules/jspdf/dist/jspdf.umd.min.js" }

Not sure if this script is correct: "scripts": [ "node_modules/tinymce/tinymce.min.js", "node_modules/jspdf/dist/jspdf.umd.min.js", "node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.min.js", "node_modules/html2pdf.js/dist/html2pdf.js", "./src/assets/js/Graphik-normal.js", "./src/assets/js/Graphik Bold-bold.js"

        ]

previously, it was this: "scripts": [ "node_modules/tinymce/tinymce.min.js", "node_modules/jspdf/dist/jspdf.min.js", "node_modules/jspdf-autotable/dist/jspdf.plugin.autotable.min.js", "node_modules/html2pdf.js/dist/html2pdf.js", "./src/assets/js/Graphik-normal.js", "./src/assets/js/Graphik Bold-bold.js"

        ]

Please help