mxui.js?638863608621449845:66 [Client] TypeError: Cannot read properties of undefined (reading 'VIEW_ONLY')

Technical Support WebViewer
,
1

WebViewer Version: 11.5.0

Do you have an issue with a specific file(s)?
initialState.js:2286:52

Can you reproduce using one of our samples or online demos?
No

Are you using the WebViewer server?
No

Does the issue only happen on certain browsers?
No

Is your issue related to a front-end framework?
Yes

Is your issue related to annotations?
No

Please give a brief summary of your issue:
I have been trying to integrate apryse webviewer widget with the version of 11.5.0 in one of the mendix project.

The integration of this widget is tested in the following studio pro versions - 9.24.21, 9.24.35 and 10.18.7, it runs well without any issues.

But when integrating the same in another existing mendix project with the studio pro version 9.24.21, I ended up receiving the following error.

mxui.js?638863608621449845:66 [Client] TypeError: Cannot read properties of undefined (reading ‘VIEW_ONLY’)
at Module. (initialState.js:2286:52)
at o (bootstrap:63:22)
at bootstrap:198:10
at webviewer-ui.min.js:1:2097

Please describe your issue and provide steps to reproduce it:
(The more descriptive your answer, the faster we are able to help you)

Please provide a link to a minimal sample where the issue is reproducible:

1 Like
2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.



It seems you’re encountering a TypeError related to an undefined property VIEW_ONLY when integrating Apryse’s WebViewer in a Mendix project. This error typically indicates that the object or module you’re trying to access hasn’t been properly initialized or imported.

Some things you can try:

  • Ensure that all necessary dependencies are correctly installed and available in your project. Sometimes, missing or incorrectly linked libraries can cause such errors.

  • Double-check the configuration files to ensure that all paths and module dependencies are correctly specified.

  • Look at the initialization sequence of the WebViewer in your project. Make sure it initializes correctly before any properties are accessed.

  • Compare the working project setup with the one experiencing issues to identify any discrepancies in configuration or file structure.

  • Review any customizations in the Mendix project that might affect the WebViewer’s initialization or configuration.




Here are some resources that might help you:



Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
3

Hello Abdul,

Thank you for reaching out.

Could you give us more informations:

  1. Your webviewer constructor options
  2. Provide a console error screenshot
  3. Provide Network tab screenshot
  4. Can you confirm if you are upgrading the version or adding Webviewer for the first time in this project?
  5. What are the consequences of the error you are mentioning?

Best Regards,
Mickaël.

1 Like
4

Hello Mickael,

Kindly find the details you requested for.

  1. Constructor used in the code we downloaded from Apryse - github.
    viewer(
    {
    path: “/resources/lib”,
    enableFilePicker: props.enableFilePicker,
    annotationUser: props.annotationUser,
    accessibleMode: props.accessibleMode,
    enableMeasurement: props.enableMeasurement,
    enableRedaction: props.enableRedaction,
    enableAnnotations: props.enableAnnotations,
    loadAsPDF: props.loadAsPDF,
    highContrastMode: props.highContrastMode,
    notesInLeftPanel: props.notesInLeftPanel,
    disabledElements: props.disabledElements.split(“\r\n”),
    selectAnnotationOnCreation: props.selectAnnotationOnCreation,
    fullAPI: props.enableFullAPI,
    css: props.customCss,
    licenseKey: props.l
    },
    viewerRef.current as HTMLDivElement
    ).

  2. Console error

    image
    image758×181 8.23 KB

  3. Network tab

    image
    image757×402 25.4 KB

  4. we are upgrading the widget (PDFTron) from v5.2.5 to v11.5.0

  5. The widget is not rendering in the page and in the pop-up as well. But in the page, when we do hard refresh it started rendering and we can perform all the actions inside the widget.

Kindly let me know if you need more details.

Best regards,
Abdul Gaffar

1 Like
5

Hi Abdul,

Thank you for providing the needed information.

If you are upgrading from v5 to 11, be aware that default mode switched from Iframe to Webcomponent, this could create some issue, you could try to see if it’s resolved by doing:

viewer.Iframe(
{
path: “/resources/lib”,

Be aware that the default UI mode also switched from legacy to modular, you might have some deprecrated API’s in your code, here is a guide showing how to migrate from legacy to UI:

Or you could easily switch back to legacy adding this option to your constructor:

ui: 'legacy'

Let us know if any of those solutions are working for you!

Best Regards,
Mickaël.

1 Like
6

Hi Mickael,

Thank you for sharing the additional information.

Following your recommendation, we set ui: 'legacy', which successfully resolved the rendering issue on both desktop and iPad browsers.

However, we’re still facing one issue related to saving annotations. Please find the scenario below:

  1. The user opens a document using the WebViewer widget inside a modal popup.
  2. Annotations are added.
  3. The “Save” option is clicked.
  4. The modal popup is closed — here’s the issue: if the user closes the modal immediately (within the same second) after the save action completes, the annotations are not saved. However, if the user waits for 3 or more seconds before closing the modal, the annotations are saved correctly.

Could you please advise if there’s a recommended approach or workaround to ensure annotations are reliably saved, even when the modal is closed immediately after saving?

Best regards,
Abdul Gaffar

1 Like
7

Hi Abdul,

Glad this worked out!

Could you give us a little more information on the “save” part.

Can you clarify what “save” you are referring to? Do you have a custom annotation? Does it save the file somewhere or start a download?

In these cases, a screen record would greatly help us understand the flow you are doing.

If this is a custom save button, please provide a code snippet of the logic behind the button.

Best Regards,
Mickaël.

2 Likes
8

Hi Mickael,

Sure, I’ll share the screen recording shortly.

In the meantime, could you please let me know how I can verify that the annotation has been successfully added or saved to the document?

Thanks in advance.

Best regards,
Abdul Gaffar

1 Like
9

Hi Abdul,

I’m afraid that without knowing how you are handling the “save” part, it’s difficult for me to answer this question.

Best Regards,
Mickaël.

1 Like
10

Hi Mickael,

We were able to handle the save functionality using a custom mechanism.

Using JavaScript, we invoked the save action from the WebViewer widget via a custom button, allowing us to trigger additional processes for saving the annotated content.

However, we’ve now encountered an issue when trying to view PDF files with a .html extension. This was working fine in version 5.2.5 but seems to be failing in the current setup.

Could you please advise on how to resolve this issue?

Best regards,
Abdul Gaffar

1 Like
11

Hi Abdul,

I’m not sure I understand what you mean by “PDF files with .html extension”, could you provide such a file?

Best Regards,
Mickaël.

1 Like
12

Hi Mickael,

The internal issue with the file server has been resolved. However, we’re now facing another challenge:

Issue:
Previously annotated content (using the freehand tool) is being erased when the file is edited. In the previous version, annotations added by one user could not be erased by another.

Scenario:

  • User 1: Edits the file by adding annotations and saves it.
  • User 2: Later edits the file by commenting or adding additional annotations.
  • Expected Behavior: Only the annotations added by User 2 should be modifiable, and annotations from User 1 (or any other user) should remain protected from being erased.

Could you please advise on how we can prevent annotations from being erased in the latest version, as it was not allowed in the older version?

Looking forward to your guidance.

Best regards,
Abdul Gaffar

1 Like
13

Hi Abdul,

Could you give a bit more information on how the annotations are saved?

Are you exporting the XFDF and then importing it back when the second user is loading the file?

If that’s the case, before exporting the annotations, you can set them as read-only.
This way, when they are imported back the next time, it will not be possible to edit or delete those annotations.

const annotations = annotationManager.getAnnotationsList();
annotations.forEach(annot => {
  annot.setFlag(Annotations.Annotation.Flags.READONLY, true);
});

const xfdfString = await annotationManager.exportAnnotations();

Let me know if that’s what you had in mind.

Best Regards,
Mickaël.

1 Like
14

Hi Mickael,

We have dealt this scenario by using the following snippet.

const annotationManager = Core.annotationManager;
const annotations = annotationManager.getAnnotationsList();

 // Lock all annotations
annotations.forEach(annot => {
    annot.Locked = true;
    annot.ReadOnly = true;
    annotationManager.redrawAnnotation(annot);
});

Best regards,
Abdul Gaffar

1 Like
15

Hi Abdul,

Thank you for letting us know.

I’m really glad you were able to find a solution.

Let me know if you have any questions.

Best Regards,
Mickaël.

1 Like
16

Hi Mickael,

I have another query!

Is it possible to save the signature in the user session when the user creates the signature using fill & sign option.

Kindly let me the know the possibilities.

Best regards,
Abdul Gaffar

1 Like
17

Hi Abdul,

Can you clarify what you mean by save? Do you want to export the signature as XFDF? Image? Or do you want to be able to import it back in the Signatures list panel?

Can you explain what you mean by user session? Do you mean local storage?

Best Regards,
Mickaël.

1 Like
18

Hi Mickael,

The expected scenario is to save the signature the moment the user creates a new signature using fill & sign option, and that needs to be populated again in the following two scenarios.

  1. The signature has to be imported when the user opens the existing document
  2. The signature has to be imported when the user opens the new document

You can refer to local storage, because I wanted to delete the signature when the user signed out the application.

Kindly provide the clarification based on the above scenario.

Best regards,
Abdul Gaffar

1 Like
19

Hi Abdul,

If the goal is to import the signature in the panel list then you can try to do something like this:

const signatureTool = documentViewer.getTool(
    instance.Core.Tools.ToolNames.SIGNATURE
);
signatureTool.addEventListener('signatureSaved', async () => {
    const exportedSignaturesData = await signatureTool.exportSignatures();
    console.log('signatureData', exportedSignaturesData);
    localStorage.setItem(
        'signatures',
        JSON.stringify(exportedSignaturesData)
    );
});
documentViewer.addEventListener('documentLoaded', async () => {
    const savedSignatures = localStorage.getItem('signatures');
    if (savedSignatures) {
        const signaturesData = JSON.parse(savedSignatures);
        await signatureTool.importSignatures(signaturesData);
    }
});

When the user signs out, you’ll have to empty localStorage.

Let me know if that is what you had in mind.

Best Regards,
Mickaël.

1 Like
20

Hi Mickael,

You actually captured our goal, thank you for that.

But when trying to follow your recommendations, couple of methods/functions are not recognizible.

Property ‘exportSignatures’ does not exist on type ‘Tool’.

Property ‘importSignatures’ does not exist on type ‘Tool’.

Kindly confirm that the functions are correct.

Thanks,
Abdul Gaffar

1 Like