PDF JS Express not working in dev or staging environment

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version 8.7.2

Detailed description of issue
I have integrated prfjs-express in my application with my license key and works well in local, but when I moved to dev or staging environment its not working.

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
For every documents

Link to document

Code snippet
const PdfViewer = ({ data }) => {
const viewer = useRef(null);

useEffect(() => {
WebViewer(
{
path: ‘/webviewer/lib’,
initialDoc: data,
licenseKey: PDF_JS_LICENCE_KEY,
},
viewer.current
).then((instance) => {
const { docViewer } = instance;
const annotManager = docViewer.getAnnotationManager();
instance.UI.setHeaderItems((header) => {
header.push({
type: ‘actionButton’,
img: ‘icon-save’,
onClick: () => {
const xfdfString = annotManager.exportAnnotations();
saveToDatabase(xfdfString);
},
});
});
docViewer.on(‘documentLoaded’, () => {
//do something
});
});
}, ); //eslint-disable-line

const saveToDatabase = (x) => {
x.then((res) => {
console.log(res, ‘the res’);
});
// console.log(‘yolo’, x)
};
return

;
};

export const MemorizedPdfViewer = memo(PdfViewer);

3

Hi there,

Thank you for reaching out to pdf.js express forums,

Could you specify what you mean by not working? Does the viewer get instantiated? Is there a watermark?
Could you please provide any console error messages and screenshots?

Best regards,
Kevin Kim

4

I will attach scrnshots for bot local and dev

Nb: Popup customized for 404 conditions

7

Hi there,

It looks like from your screenshot that the viewer does not get instantiated. Do you have any screenshots of the console error messages for the staging environment?

Do you have the correct domain registered for your license key?

Do you have the correct path for the WebViewer constructor in the staging environment? Similar post available here: Webviewer initialization error

Best regards,
Kevin Kim

9

Hi there,

That is the expected console log in development environment (i.e. localhost). If your domain is the correct url, then that is setup correctly.

www.archre.com redirects you to Bermuda - Arch Reinsurance

image
image1920×294 79.4 KB

Is this the correct domain?

Can you setup the staging url to see the console errors?

Best regards,
Kevin Kim

10

There is no console error. when trying to open a pdf, the screen just navigate back to the landing page instead of the actual DPF viewer.
archre.com is the domain we use for our internal apps.

11

Hi there,

Could you please provide a minimal runnable sample project to replicate the issue?

Best regards,
Kevin Kim

12

We don’t have any issue in local, when it moves to stg it it not working.

13

Hi there,

Unfortunately we will need more information to diagnose this issue, could you please provide a video with the console open when you try to open a PDF?

Some possible solutions:

Best regards,
Kevin Kim

14

Hi kkim,

Could you please provide an email address and let’s contact through email if you don’t mind? Thanks.

15

Hi there,

You can message me directly on this forum by clicking my profile, thanks

16

This is the console message when running in the local. We got a warning, but the viewer is loaded properly

local
local1226×653 48 KB

17

This is the video I took after deploying to DEV env.
pdfjs

18

The viewer was not loaded, instead the application’s landing screen was loaded in the viewer’s place

deployed
deployed1472×739 116 KB

19

Thank you for your response,

From the gif you posted, it looks like the viewer iframe does not get instantiated in the staging environment. It also looks like none of the request are being made that are related to pdf.js.

Can you confirm if the useEffect is being triggered for staging?

Best regards,
Kevin Kim

20

Thanks kkim. I will confirm that and let you know shortly

21

Yes, the useEffect is called.

LOCAL:
pdfjs-local

22

STAGE:
pdfjs-stg

23

Thank you for your response,

From the local video, the log ‘Web Viewer is instantiated’ shows up, but in the staging video, that log does not show up.

This could be due to the path attribute in WebViewer not being set up correctly. Could you please confirm if that is the case? Can you try removing the ‘initialDoc’ and see if the Web Viewer gets instantiated?

Do you instantiate the viewer when you click the PDF on the left pane? We recommend you to load documents via loadDocument() rather than creating a new Viewer when opening a new document.

Best regards,
Kevin Kim

24

We have tried everything, still resulting the same problem.
Can you confirm one thing ,
in local I can see
PDFJS.express: Development environment detected. This license key is currently registered to www.archre.com
and our dev url is https://vinta-dev.archre.com
Is that fine or should url should be same as the key registered with?