pdfjs es5 version issue

[jinman]

Hi @agentcooper,

Thanks again for the great library.

We noticed that two issues:

1. when we upgrade from 2.6.347 to 2.8.335

./node_modules/pdfjs-dist/lib/display/api.js 1926:137
Module parse failed: Unexpected token (1926:137)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       numPages: this._numPages,
|       annotationStorage: (annotationStorage === null || annotationStorage === void 0 ? void 0 : annotationStorage.serializable) || null,
>       filename: ((_this$_fullReader = this._fullReader) === null || _this$_fullReader === void 0 ? void 0 : _this$_fullReader.filename) ?? null
|     }).finally(() => {
|       if (annotationStorage) {

Other people are also complaining about this:
https://stackoverflow.com/questions/67114898/additional-loader-for-pdfjs-dist-in-react-app
or
mozilla/pdf.js#12905

2. React Bundle size due to pdfworker.js multiplies (900KB X # of references of PDFworker) as we reference the PDF viewer (using react pdf highlighter) at multiple places in the app. Is there any way to not use pdfworker using worker-loader? We are following the example code but would love to know if there is any other way.

Any help will be highly appreciated

[agentcooper]

I think the way to go is to update to the latest PDF.js, however there are problems with highlight rendering: #154.

[jinman]

Hi @agentcooper, do you mean update the dependency or a line import PDFWorker from "worker-loader!pdfjs-dist/build/pdf.worker?

[hdminh247]

HI @agentcooper , any updates I got the same issues

[agentcooper]

@jinman @hdminh247 I've published 5.1.0, it should fix your issue. Now it uses /legacy imports from pdfjs-dist which are compatible with ES5.

[hdminh247]

@agentcooper after upgrading to 5.1.0, it shows blank when opening pdf file now. I notice it shows warning message in console

Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified.

[agentcooper]

@hdminh247 yes, you need to setup the PDF.js worker, see ./example/src/index.tsx.

[hdminh247]

@agentcooper it does not works even setup PDF.js worker like above, same warning issues, the pdf still be shown as blank

[johnn134]

I'm also getting the same errors even though I've defined GlobalWorkerOptions.workerSrc.

[hdminh247]

@agentcooper also is there any way to hide emoji on highlight comment ?

[agentcooper]

@hdminh247 @johnn134 what setup are you using? is it Create React App?

[agentcooper]

I've published 5.2.0 which does not require external workerSrc config: 7bb025a.

[johnn134]

@agentcooper yes the issue appears with create-react-app. I've additionally used react-app-rewired to utilitize worker-loader to get react-pdf-highlighter 4.0.0 working in my app. I've tried setting GlobalWorkerOptions.workerSrc to a string, an imported worker, and a few other possibilities, but the Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified. persists.

In the meantime, I'm sticking with version 4.0.0 since I could get it working by forcing pdfjs-dist to version 2.6.347 in both my app and react-pdf-highlighter by using
"resolutions": { "react-pdf-highlighter/pdfjs-dist": "2.6.347" }
in my package.json

[agentcooper]

@johnn134 Would you be able to provide a reproducible example on CodeSandbox or a repo? I have an example with CRA in ./create-react-app-example and it seems to work fine.

[johnn134]

@agentcooper I wonder if this is a case of "works on my machine but not yours". When I clone this repo and run the create-react-app-example it errors out immediately before even running the app. I've run npm install and made sure the source files are copied over with the postinstall. I've seen some warnings in the source code here and there related to an absence of type declarations for react-pdf-highlighter, so maybe an accompanying @types/react-pdf-highlighter or other method to reference a declare module for the tool would help.

I wonder if there is a global package you're using locally that allows the CRA version to run correctly. Otherwise, the issue is with me here and I can't find the problem yet with how I've setup your repo.

The base example ran from the repo root is fine, but the CRA example causes these errors after compilation:

index.tsx:6 Uncaught Error: Cannot find module 'react-pdf-highlighter'
    at webpackMissingModule (index.tsx:6)
    at Module.<anonymous> (index.tsx:6)
    at Module../src/react-pdf-highlighter.ts (react-pdf-highlighter.ts:2)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Module.<anonymous> (Spinner.css:7)
    at Module../src/App.tsx (App.tsx:235)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Module.<anonymous> (Spinner.tsx:6)
    at Module../src/index.tsx (index.tsx:6)
    at __webpack_require__ (bootstrap:851)
    at fn (bootstrap:150)
    at Object.1 (test-highlights.ts:2)
    at __webpack_require__ (bootstrap:851)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
webpackMissingModule @ index.tsx:6
(anonymous) @ index.tsx:6
./src/react-pdf-highlighter.ts @ react-pdf-highlighter.ts:2
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ Spinner.css:7
./src/App.tsx @ App.tsx:235
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
(anonymous) @ Spinner.tsx:6
./src/index.tsx @ index.tsx:6
__webpack_require__ @ bootstrap:851
fn @ bootstrap:150
1 @ test-highlights.ts:2
__webpack_require__ @ bootstrap:851
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1451 ./src/App.tsx
Attempted import error: 'AreaHighlight' is not exported from './react-pdf-highlighter'.
console.<computed> @ index.js:1451
handleErrors @ webpackHotDevClient.js:150
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:193
index.js:1451 ./src/App.tsx
Attempted import error: 'Highlight' is not exported from './react-pdf-highlighter'.
console.<computed> @ index.js:1451
handleErrors @ webpackHotDevClient.js:150
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:193
index.js:1451 ./src/App.tsx
Attempted import error: 'PdfHighlighter' is not exported from './react-pdf-highlighter'.
console.<computed> @ index.js:1451
handleErrors @ webpackHotDevClient.js:150
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:193
index.js:1451 ./src/App.tsx
Attempted import error: 'PdfLoader' is not exported from './react-pdf-highlighter'.
console.<computed> @ index.js:1451
handleErrors @ webpackHotDevClient.js:150
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:193
index.js:1451 ./src/App.tsx
Attempted import error: 'Popup' is not exported from './react-pdf-highlighter'.
console.<computed> @ index.js:1451
handleErrors @ webpackHotDevClient.js:150
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:193
index.js:1451 ./src/App.tsx
Attempted import error: 'Tip' is not exported from './react-pdf-highlighter'.
console.<computed> @ index.js:1451
handleErrors @ webpackHotDevClient.js:150
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:193
index.js:1451 ./src/react-pdf-highlighter.ts
Module not found: Can't resolve 'react-pdf-highlighter' in '/Users/--/--/--/react-pdf-highlighter/create-react-app-example/src'```

[agentcooper]

@johnn134 I think you're missing npm run build in the root of the repo.

[johnn134]

@agentcooper running build fixed the example. I'll compare the example to my local app to see what the issue with workerSrc is. Adding the build step to the README could help other people struggling to get the CRA example running. Thanks for responding quickly lately.

[agentcooper]

@johnn134 Sure, no problem. I've updated README.md in ./create-react-app-example. Let me know once you find the issue.

[hdminh247]

@agentcooper thanks, it's working with the latest release now. very appreciate it 🙏

Btw could you let me know if there any way to hide emoji on highlight comment ?

[johnn134]

@agentcooper Version 5.2.0 is working great with my local app now, thanks for the help

[agentcooper]

@hdminh247 please see #44