SyntaxError: Parse error - Wkhtmltopdf with react-pdf-js lib

Question

I am using wkhtmltopdf version 0.12.2.1 (with patched qt) to render my reactJs app! It worked fine, until I added the react-pdf-js lib to render the pdf generated inside my app. I followed the code described on react-pdf-js documentation (see https://www.npmjs.com/package/react-pdf-js) to make it work.

The pdf is rendered inside my page, and it looks pretty cool indeed. But when I try to run wkhtmltopdf again, to generate a pdf of any page of my app, the following error is returned:

desenv01@desenv01-PC:~$ wkhtmltopdf -O Landscape --print-media-type --debug-javascript  http://localhost:3000/report/1 report.pdfLoading pages (1/6)
Warning: undefined:0 ReferenceError: Can't find variable: Float64Array
Warning: http://localhost:3000/assets/js/app.js:46789 SyntaxError: Parse error
Counting pages (2/6)                                               
Resolving links (4/6)                                                       
Loading headers and footers (5/6)                                           
Printing pages (6/6)
Done

Then, I went to my app.js to see what's on line 46789:

    set href(href) {
      clear.call(this);
      parse.call(this, href);
    },

    get protocol() {
      return this._scheme + ':';
    },
    set protocol(protocol) {
      if (this._isInvalid)
        return;
      parse.call(this, protocol + ':', 'scheme start');
    },

The error happens on the line that says parse.call(this, href);, which is part of pdf.combined.js script.

I could not find any solution online so I wondered if there is anyone who might know if I did something wrong or a way to work around it.

Thanks..

Possible duplicate of [Debugging javascript in wkhtmltopdf](http://stackoverflow.com/questions/17151755/debugging-javascript-in-wkhtmltopdf) — Paul Sweatte, Jul 06 '16 at 12:29

score 2 · Answer 1 · answered Jun 09 '17 at 19:44

I ran into this using wkthmltopdf 12.3 and 12.4 because I have my IDE set to nag me for using var instead of let. The problem is the older Qt engine powering those versions of the program doesn't recognize new-style, ES6 keywords. Not sure if you can down-convert React. Otherwise you can try the bleeding edge versions which use a newer Qt.

score 0 · Answer 2 · answered Dec 14 '22 at 12:29

I have same problem. I fixed it by modify some code that i think it is new in JS. let keyword (ES5) and template literals (ES6).

generateRandomColor= function () {
  let maxVal = 0xFFFFFF; // 16777215
  let randomNumber = Math.random() * maxVal;
  randomNumber = Math.floor(randomNumber);
  randomNumber = randomNumber.toString(16);
  let randColor = randomNumber.padStart(6, 0);
  return `#${randColor.toUpperCase()}`
}

I modify above code into below

generateRandomColor = function () {
  var maxVal = 0xFFFFFF;
  var randomNumber = Math.random() * maxVal;
  randomNumber = Math.floor(randomNumber);
  randomNumber = randomNumber.toString(16);
  var randColor = randomNumber.padStart(6, 0);
  return "#" + randColor.toUpperCase();
}

SyntaxError: Parse error - Wkhtmltopdf with react-pdf-js lib

2 Answers2