Annotations not generating an element property on documents loaded after the first

Technical Support
1

Which product are you using?
PDF.js Express
PDF.js Express Version
8.7.0
→

Detailed description of issue
Annotations generate properly on first render, but do not generate when a new document is loaded. Annotation values are generated with empty ‘element’ property, thus making them not appear on the PDF. A use hook is used to generated an array of stamps.

Expected behaviour
It is expected that annotations will appear on document

Does your issue happen with every document, or just one?
Issue happens on any document that isn’t the first document loaded.

Link to document
Document agnostic

Code snippet
const [viewInstance, setViewInstance] = useState();
const { Annotations } = viewInstance ?? {};
const { isLoading, data } = useGetDocument(props.document.DocumentId);
const { annotationStamps } = useAnnotations(viewInstance, props.document);

const viewer = useRef(null);

useEffect(() => {
    WebViewer(
        {
            licenseKey: process.env.REACT_APP_PDFJS_LICENSE,
            path: '/webviewer/lib',
        },
        viewer.current,
    ).then((instance: typeof WebViewer) => {
        instance.UI.disableElements(['annotationCommentButton']);
        instance.UI.disableTools();
        instance.UI.disableElements(['annotationCommentButton']);
        instance.UI.disableElements(['pageNavOverlay']);
        instance.UI.disableElements(['eraserToolButton']);
        instance.UI.disableElements(['ribbons']);
        const { docViewer, Annotations } = instance;
        setViewInstance(instance);
        docViewer.addEventListener('documentLoaded', () => {
            // here you can get the document and perform actions on it,
            // such as removing pages
            console.log('document loaded');
        });
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
    if (isLoading || !data || !viewInstance) return;
    viewInstance.loadDocument(data, { filename: props.document.DocumentName });
    if (annotationStamps) {
        if (annotationStamps.length > 0) {
            annotationStamps.forEach((stamp: Core.Annotations.Annotation) => {
                console.log('Stamp', stamp);
                let annotationManager = viewInstance.Core.documentViewer.getAnnotationManager();
                annotationManager.addAnnotation(stamp);
            });
        }
    }
}, [data, viewInstance]);
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

4

It appears the createInnerElement is not being called subsequent times after a new document load.

5

Solved by using a loaded state that is updated on the document loading event. Then placing the annotation generation in useEffect with the loaded dependecy. Check if loaded is true, then run annotations. If data is changed, set loaded to false.