Build causes error on server Missing PDF

[Steven]

Hi
On our local and server both the locations when I generate build using yarn run build or npm run build it appends some minified javascript code at the end of the bundle.js fine, it has the following comment:
/*!

• The buffer module from node.js, for the browser.
• @author Feross Aboukhadijeh http://feross.org
• @license MIT
  */

I compared my old backup of build and newly generated build, I found that there are few changes in the newly added code, that’s why it is causing the error while retrieving pdf “Missing PDF”, and the URL shows my website URL added on before the PDF URL. Example I am trying to load PDF “https://cfdev-cdn.contractorforeman.net/0000_sandbox/50308/notes/large/EstimateABB82.pdf?1737970466055”, but it throws error - Missing PDF “https://cfdev.contractorforeman.net/annotate/lib/ui/"https://cfdev-cdn.contractorforeman.net/0000_sandbox/50308/notes/large/EstimateABB82.pdf?1737970466055"”

When I replace that code with my old backup of build it works fine.

Because of this issue my users are getting affected. I would really appreciate if you can check and get me the solution at your earliest.

[kkim]

Hi there,

Are you using the latest veresion of pdf.js express?
How are you loading the document in your application?

Best regards,
Kevin Kim

[Steven]

Hi,

Thank you for the prompt response. I am using the 8.2.0.
Following is my code to load the document.

const myCustObj = {
‘userName’: LOGGED_IN_USERNAME
};
WebViewer({
path: ‘annotate/lib’, // path to the PDF.js Express’lib’ folder on your server
licenseKey: ‘MY_LICENSE_KEY’,
initialDoc: “MY_CDN_DOCUMENT_URL”,
custom: JSON.stringify(myCustObj)
}, document.getElementById(‘viewer’))
.then(instance => {
if($(window).width() <= 480)
{
$(“#webviewer-1”).contents().find(“.Header.Tools”).css(‘visibility’,‘hidden’);
$(“.hamburger_btn”).css(‘display’,‘block’);
}
// Create a new instance of the utility SDK
const utils = new ExpressUtils({
serverKey: ‘MY_SERVER_KEY’,
clientKey: ‘MY_CLIENT_KEY’
})
const docViewer = instance.docViewer;
const annotManager = instance.annotManager;
// call methods from instance, docViewer and annotManager as needed

$("#webviewer-1").contents().find(".Dropdown__item[data-element='dropdown-item-toolbarGroup-View']").on('click', function() {
	$("#webviewer-1").contents().find(".Header.Tools").css('visibility','hidden');
});
$("#webviewer-1").contents().find(".Dropdown__item").not(".Dropdown__item[data-element='dropdown-item-toolbarGroup-View']").on('click', function() {
	$("#webviewer-1").contents().find(".Header.Tools").css('visibility','visible');
});

const mapNames = (annotation) => { return LOGGED_IN_USERNAME; }

annotManager.setAnnotationDisplayAuthorMap(mapNames);

instance.UI.enableElements(['downloadButton']);
instance.UI.disableElements([
  'polygonToolGroupButton'
  , 'polyLineToolGroupButton'
  , 'highlightToolGroupButton'
  , 'underlineToolGroupButton'
  , 'strikeoutToolGroupButton'
  , 'squigglyToolGroupButton'
  , 'stickyToolGroupButton'
]);

docViewer.on('documentLoaded', () => {
    instance.UI.setFitMode(instance.FitMode.FitWidth);
    var file_id = $("#docViewer #pdf_file_edit").attr('doc-id');

	var xfdfString = (global_annotate_data['annotation_data'] === undefined || global_annotate_data['annotation_data'] == '') ? '' : global_annotate_data['annotation_data'];

	xfdfString = xfdfString.replace(/\[\"/g, "[");
	xfdfString = xfdfString.replace(/\"\]/g, "]");
	if (xfdfString != '') {
		annotManager.importAnnotations(xfdfString);
	}
})

Thanks & Regards

[kkim]

I see that you are loading your document via the initialDoc variable inside the Webviewer constructor. Is the URL that is being passed there being malformed?

Could you please comment that line out and try calling
instance.UI.loadDocument('your url here')
right after WebViewer instantiates?

best regards,
Kevin

[Steven]

Thanks for this, Kevin. I have copied our dev team on this.

[Steven]

Hi,

We tried applyiong the solution you provided. We commented out the line with initialDoc: “MY_CDN_DOCUMENT_URL”, and added instance.UI.loadDocument(‘your url here’).
We tried adding that line straign below .then(instance => { but it didn’t work, so we tried adding it above instance.UI.enableElements([‘downloadButton’]); but it didn’t work.

On above solution it opened the editor but there is nothing loaded in it.

Looking forward to hearing from you.

Thanks & Regards

[kkim]

Thank you for your reply,

Using the loadDocument API right after instance promise is good there, it shouldn’t matter before or after the enable/disableElements API.

Could you please confirm in the network request panel that the file with the correct url is being fetched? You should see something like this:

best regards,
Kevin

[Steven]

@kkim

instance.UI.loadDocument(‘your url here’)

Hi,

Thank you for the response. Unfortunately I don’t see any URL being called for the file that I have specified.

Let me know your thoughts on this.

Thanks & Regards

[kkim]

Are there any errors in the console? Is the URL correctly passed into the loadDocument or the initialDoc?

Can you try calling it directly from the console? You can do it like this:

const instance = WebViewer.getInstance();
const { Core, UI } = instance;
UI.loadDocument('https://cfdev-cdn.contractorforeman.net/0000_sandbox/50308/notes/large/EstimateABB82.pdf?1737970466055')

[Steven]

Copying developer on this.

Thanks!

Steven Gabbard

CONTRACTOR FOREMAN

Email: steven@contractorforeman.com | Web: ContractorForeman.com

[Steven]

@kkim

instance.UI.loadDocument(‘your url here’)

Hi,

Thank you for the prompt response. I don’t get any error when I load it using the instance.UI.loadDocument

When I execute the code given by you inside console of the browser, I am getting error “VM1439:1 Uncaught ReferenceError: WebViewer is not defined”
const instance = WebViewer.getInstance();
const { Core, UI } = instance;
UI.loadDocument(‘https://contractor-foreman-images.s3.amazonaws.com/2513/notes/large/EstimateABB82.pdf?1738574474090’)

Thanks & Regards

[kkim]

Click the ‘Top’ context, select the webviewer-1 iframe, and then try calling just the bottom 2 lines:

const { Core, UI } = instance;
UI.loadDocument(‘https://contractor-foreman-images.s3.amazonaws.com/2513/notes/large/EstimateABB82.pdf?1738574474090’)

If it works, then there must be an issue in how you are using the loadDocument API call.

best regards,
Kevin

[Steven]

@kkim

const instance = WebViewer.getInstance();
const { Core, UI } = instance;
UI.loadDocument('https://cfdev-cdn.contractorforeman.net/0000_sandbox/50308/notes/large/EstimateABB82.pdf?1737970466055')

Hi,

Thank you for providing the further details. I tried the way you have mentioned. I am still getting the error. This time I selected iframe with id “webviewer-1”, and then inside console I executed the 2 lines given by you. I got an error “Uncaught ReferenceError: instance is not defined”. After that I tried the code you provided earlier mentioned below:
const instance = WebViewer.getInstance();
const { Core, UI } = instance;
UI.loadDocument(‘https://cfdev-cdn.contractorforeman.net/0000_sandbox/50308/notes/large/EstimateABB82.pdf?1737970466055’)

Then it gave me error “Uncaught TypeError: Cannot destructure property ‘Core’ of ‘instance’ as it is null.”.

markup_issue.zip (6.1 MB)
I have attached video inside the zip file for your reference.

Thanks & Regards

[kkim]

Hi there,

It looks like you clicked the iFrame element but I didn’t see the webviewer-1 in the context. An example can be seen on the demo site:

Once you select the iframe context, you should have access to the instance variable referring to the WebViewer instance. From there, you should be able to call it’s APIs like instance.UI.loadDocument(‘your url’)

From the video, it looks like the WebViewer instance loads up fine, so the API should work as expected. The issue seems to be coming from your initialDoc variable in the constructor. I recommend breakpointing near that point to see if your url is being passed as correctly to that variable.

best regards,
Kevin

[Steven]

Jaydip, see the reply below.

[Steven]

@kkim

https://cfdev-cdn.contractorforeman.net/0000_sandbox/50308/notes/large/EstimateABB82.pdf?1737970466055

@kkim Thank you for providing the details. I tried the way you explained, it loaded the document when I executed the code from the console.
However the code doesn’t work when I update my index.js file and generate build. I passed you the code earlier, could you please check that and let us know your thoughts on what could be wrong in that code?

Thanks & Regards

[kkim]

Hi there,

I ran your url into the pdfjs react sample and ran the built application. The url looks fine and the network requests go through:

This is the WebViewer constructor:

useEffect(() => {
        WebViewer(
            {
                path: '/webviewer/lib',
                // initialDoc: '/files/pdftron_about.pdf',
                initialDoc: 'https://cfdev-cdn.contractorforeman.net/0000_sandbox/50308/notes/large/EstimateABB82.pdf?1737970466055',
                enableFilePicker: true,
            },
            viewer.current,
        ).then((instance) => {
            const { documentViewer, Annotations, annotationManager } = instance.Core;

I would recommend you try rebuilding your application. Otherwise please try checking the network tab again with your application and see if the fetches are going through for the document.

best regards,
Kevin

[Steven]

@kkim Thanks for the quick response. I understand that there is no issue with the URL. That’s why I asked you if you could check the code I have provided you earlier, and let me know any possible reason you can find for the issue.

Looking forward to hearing from you.

Thanks & Regards

[kkim]

From the previous code provided, it doesn’t look like there is an issue. Could you please try updating to version 8.7 and then rebuild the application?

Please also check the network tab to see if the request for your PDF is also going through.

Best regards,
Kevin

[Steven]

Jaydip, see the reply from Kevin.