Unexpected token <

[valentinfily]

Hi,

Thank you for maintaining this awesome package :)

I'm trying to use it in my React app but I get the following error in the console and the component is stuck on loading:

Uncaught SyntaxError: Unexpected token < http://project_server.dev/app_folder/d58d9dd3a5c5f2a8eafb.worker.js

I'm loading a base64 PDF served by my Laravel backend. I'm using webpack and everything seem properly set up. The base64 PDF seems file too.

Any idea what I'm doing wrong?

Many thanks

[wojtekmaj]

Hey there!
To me, it looks like ......worker.js file doesn't exist in your case, and you probably get some HTML error page instead, hence the < token at the beginning of the file. Please see README.md section of this repository (if you're still on version 1.x, you'll have to look in file history or see README.md from your node_modules folder) on instructions how to handle workers.

[valentinfily]

Hey,
thanks for the quick answer. I tried without the worker enabled and your sample PDF and I get a 'Failed to load PDF file.' without further info. :(

[wojtekmaj]

Which version are you on?

In general, it's a bad idea to start the project without the worker. In version 2.x, I've put extra effort to make it as easy as possible to do properly, so you might consider an update.

"Failed to load PDF file" is just a message shown to the user. You might want to catch the errors on your own - you have several props for that, please refer to README.md (they are usually called on...Error, so it's easy to find them).

[valentinfily]

Thank you, I am using the 2.0.0-beta.4

For now I found a solution for it to work without the worker by adding .bind(this) to onDocumentLoad

I think the worker problem might come from a routing problem from my Laravel set-up

<Document
          file={file}
          onLoadSuccess={this.onDocumentLoad.bind(this)}
          loading={this.renderLoader()}
        >

Many thanks for your help!

[wojtekmaj]

No worries. Here to help if you need anything in the future :)

[wojtekmaj]

Hey @potioventures, for your information - v2.0.0 (non-beta) just went live!

[kolyasya]

Have the same problem, without worker all works fine

[wojtekmaj]

Hey @kolyasya. Do you mean unexpected token? Usually Uncaught SyntaxError: Unexpected token < happens when JS file is not really there and a fallback is made to index.html. That would mean your webpack build is failing. If I'm right, would you share the full error with me?

[kolyasya]

@wojtekmaj Yes. I'm using your package in my Meteor application, so it doesn't have Webpack, but works the same way.
Initially I imported your package like
import { Document, Page } from 'react-pdf';

In this case I have an error:

pdf.worker.js:1 Uncaught SyntaxError: Unexpected token <
modules.js?hash=d4b95ce9e5ca5bde9c775e356d9cf88b678060db:115519 Uncaught TypeError: Cannot read property 'WorkerMessageHandler' of undefined
    at modules.js?hash=d4b95ce9e5ca5bde9c775e356d9cf88b678060db:115519
    at HTMLScriptElement.Util_loadScript.script.onload (modules.js?hash=d4b95ce9e5ca5bde9c775e356d9cf88b678060db:112760)
(anonymous) @ modules.js?hash=d4b95ce9e5ca5bde9c775e356d9cf88b678060db:115519
Util_loadScript.script.onload @ modules.js?hash=d4b95ce9e5ca5bde9c775e356d9cf88b678060db:112760

If I switch to
import { Document, Page } from 'react-pdf/build/entry.noworker';

All works nice and as expected 👍

[valentinfily]

My problem here I think (and potentially @kolyasya) is to be able to specify the worker's location given we use a separate routing system.
Any idea if this is something that we can define in webpack or directly in this brilliant package? :)

[againksy]

Same problem, how to fix it?

[wojtekmaj]

@againksy, check in Network tab of developer tools what is actually loaded as pdf.worker.js. Chances are, it's a HTML 404 file which Webpack tries to parse as JS and obviously fails.

Check instructions for handling workers in README.md closely. In case of any further questions write here!

[mattblackdev]

@wojtekmaj Thank you for this awesome module. @kolyasya I am using this in a meteor app as well. For anyone tackling this in Meteor here's what I did:

1. Copy node_modules/pdfjs-dist/build/pdf.worker.min.js to public/pdf.worker.min.js
2. import { Document, Page, setOptions } from 'react-pdf'
3. setOptions({ workerSrc: '/pdf.worker.min.js', })

Confirm it's loading:

[abelsj60]

Hi. I'm getting the same "Uncaught SyntaxError: Unexpected token <" with Webpack. An inspection does take me to the top of my index.html file. I'm sure the worker isn't loading correctly. I went through the Readme for version 3.x (I tried installing @^4.0.0, but npm said it didn't exist; I'm using React 16.3.2.) I have the following line in my component — import { Document, Page } from 'react-pdf/dist/entry.webpack';.

Is this what you mean in your readme, or is there a loader I should be adding into webpack.config? Or maybe I'm not doing something with cMaps? I'm not really clear what I may be doing wrong, even if it is a worker. Thanks for the assist.

[kolyasya]

@mattblackdev thank you, it works!

[wojtekmaj]

@abelsj60 4.0.0 doesn't exist just yet, but 4.0.0-beta does. I'm fairly confident about this one; you can check it out on React 16.3 and up.

[mxmzb]

here is a little bit of my 2sense:

1. i think this issue might exist in the first place because of local filesystem. here is even a warning:

   react-pdf/src/entry.js

   Line 9 in df795ac

   warnOnDev('You are running React-PDF from your local file system. PDF.js Worker may fail to load due to browser\'s security policies. If you\'re on Google Chrome, you can use --allow-file-access-from-files flag for debugging purposes.');

2. i tried the solution @mattblackdev and at first it worked. i actually have no clue what the reason is, but it stopped working shortly after. also, from that point on my app breaks if i do import { setOption } from "react-pdf" with a hard to debug message: Uncaught ReferenceError: Invalid left-hand side in assignment
3. i assume the error from 2. comes from setOptions being a UMD module.

i hope this information is helpful for anyone trying to figure out, what's going on - or in the further development of version 4.0. i will also proceed to investigate later in time.

PS.: Another fix i guess would be to follow @mattblackdev's solution but instead of step 2 or 3 to just load the worker from your public/index.html (not tested though).

[jtibrewal09]

Hi, I'm getting the same Uncaught token < error. My pdf.worker.js is returning some HTML document.
I'm using react 15.5.4 and react-pdf 3.0.x.
I read all the comments above but still didn't got the clear picture. Can anyone please help me!

Link to codesandbox
https://codesandbox.io/s/zen-wright-ed5jc.

[wojtekmaj]

@jtibrewal09 You're requesting pdf.worker.js from a location that doesn't exists and you're getting a HTML with 404 error page instead of JS file. App tries to parse HTML file as a JS file and throws this error.

You used Create-React-App, so you should follow Create-React-App instructions.

In React-PDF 3.x, you will have to use setOptions to set workerSrc instead. So final form would look like:

https://codesandbox.io/s/jovial-kirch-p95he

[jtibrewal09]

Thank you so much @wojtekmaj for helping me out this quick.

[nikhilbatta]

I am trying to import set options but it says it does not exist in the module

[wojtekmaj]

setOptions is not a thing since 4.x. Use options prop passed to Document component. See details in README.

[thorfischer]

Hi:

Having the same problem, but setting pdf.worker.js doesn't work. Check it out here:
https://codesandbox.io/s/agitated-haze-euow0?file=/src/pages/index.js

[denislutz]

Hey Guys, I lost some time on this issue, although its kind of simple.
@wojtekmaj thank you so much for this great package, but please include this info in the doc on the main page.

You need to process the worker.min.js with other packages through webpack, so at the end this is what I have.
Calling the worker externally from cdn is in a lot of companies to really an option you want to have.

React component:

import { Document, Page, pdfjs } from 'react-pdf'
import workerFilePath from 'pdfjs-dist/build/pdf.worker.min.js'

pdfjs.GlobalWorkerOptions.workerSrc = workerFilePath

Webpack:

       {
          test: /pdf\.worker\.min\.js$/,
          loader: 'url-loader',
          options: {
            name: 'pdfWorker.[ext]',
            limit: 1000,
          },
          type: 'javascript/auto',
        },

[Nemabso]

Hi, I'm getting this two errors :

Deprecated API usage: render no longer accepts the renderInteractiveForms-option, please use the annotationMode-option instead.
2util.js:400 Warning: TT: undefined function: 32;

I saw the others problems but I didn't found a solution
can you help me please ?

[devuxer]

For CRA (w/ Webpack 4), the only thing that worked for me in production (using an Azure App Service) was to reference an external CDN. (I didn't have to do anything special, though, when running on localhost.)

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.js`;

[JayeshKathrotiya]

@devuxer hi after adding the same. I'm getting these two errors:
Failed prop type: The prop 'page.commonObjs._objs' is marked as required in 'PageCanvasInternal', but its value is 'undefined'. Failed prop type: The prop 'page.commonObjs._objs' is marked as required in 'TextLayerInternal', but its value is 'undefined'

[andreysdrv]

@devuxer, worked for me. Thank u!

[c4chotu]

when i try to upload pdf file i get this error
Uncaught SyntaxError: Unexpected token '<'
at handleError (http://localhost:3000/static/js/bundle.js:86442:58)
at http://localhost:3000/static/js/bundle.js:86461:7